create-react-native-web-application icon indicating copy to clipboard operation
create-react-native-web-application copied to clipboard

'__DEV__' is not defined

Open shukerullah opened this issue 5 years ago • 5 comments

How to define __DEV__ in config-overrides using customize-cra? Thanks.

shukerullah avatar Oct 06 '20 10:10 shukerullah

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(),
);

shukerullah avatar Oct 06 '20 10:10 shukerullah

Did you eject from create-react-app?

RichardLindhout avatar Oct 06 '20 13:10 RichardLindhout

No

shukerullah avatar Oct 06 '20 13:10 shukerullah

Hmm, not sure let's keep it open!

RichardLindhout avatar Oct 06 '20 13:10 RichardLindhout

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(),
  // ...
);

kuasha420 avatar Oct 19 '20 04:10 kuasha420