create-react-native-web-application
create-react-native-web-application copied to clipboard
'__DEV__' is not defined
How to define __DEV__ in config-overrides using customize-cra? Thanks.
This is how I added __DEV__ in definitions. If you have better way to define __DEV__, let me know please. Thanks.
// required imports
// ...
const findPlugin = (plugins, pluginName) =>
plugins.find((plugin) => plugin.constructor.name === pluginName);
const appIncludes = [
path.resolve('src'),
path.resolve('app.json'),
// any react-native modules you need babel to compile
];
const customizer = () => (config) => {
config.module.rules[0].include = appIncludes;
config.module.rules[1] = null;
config.module.rules[2].oneOf[1].include = appIncludes;
config.module.rules = config.module.rules.filter(Boolean);
const __DEV__ = config.mode === 'development';
const plugin = findPlugin(config.plugins, 'DefinePlugin');
plugin.definitions = {
...plugin.definitions,
__DEV__,
};
return config;
};
module.exports = override(
addReactRefresh(),
fixBabelImports('module-resolver', {
alias: {
'^react-native$': 'react-native-web',
},
}),
addWebpackAlias({
'react-native': 'react-native-web',
// here you can add extra packages
}),
babelInclude(appIncludes),
customizer(),
);
Did you eject from create-react-app?
No
Hmm, not sure let's keep it open!
Similar idea...
In config-overrides.js
const findWebpackPlugin = (plugins, pluginName) =>
plugins.find((plugin) => plugin.constructor.name === pluginName);
const overrideDefinePlugin = () => (config) => {
const plugin = findWebpackPlugin(config.plugins, 'DefinePlugin');
plugin.definitions.__DEV__ = config.mode === 'development';
return config;
};
module.exports = override(
// ...
overrideDefinePlugin(),
// ...
);