Skip to content
This repository has been archived by the owner on Dec 1, 2022. It is now read-only.

'__DEV__' is not defined #3

Open
shukerullah opened this issue Oct 6, 2020 · 5 comments
Open

'__DEV__' is not defined #3

shukerullah opened this issue Oct 6, 2020 · 5 comments
Labels
help wanted Extra attention is needed question Further information is requested

Comments

@shukerullah
Copy link

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

@shukerullah
Copy link
Author

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

@RichardLindhout
Copy link
Member

Did you eject from create-react-app?

@shukerullah
Copy link
Author

No

@RichardLindhout RichardLindhout added help wanted Extra attention is needed question Further information is requested labels Oct 6, 2020
@RichardLindhout
Copy link
Member

Hmm, not sure let's keep it open!

@kuasha420
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
help wanted Extra attention is needed question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants