react native web, __DEV__ not defined

Question

If you want to share code between RN and RN-web, __DEV__ should also be provided in the both platform.

However I can't add DEV using const __DEV__ = process.env.NODE_ENV !== 'production'; new webpack.DefinePlugin({__DEV__})

I can set window.__DEV__ fine, but RN code uses __DEV__

I've also tried adding module:metro-react-native-babel-preset

I've seen React Native - __DEV__ is not defined

/* global __DEV__ */ works, but hope there's a way to fix it without modifying all source which uses __DEV__

Answer 1

in your webpack.config.js, add this:

  plugins: [
    // `process.env.NODE_ENV === 'production'` must be `true` for production
    // builds to eliminate development checks and reduce build size. You may
    // wish to include additional optimizations.
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      __DEV__: process.env.NODE_ENV !== 'production' || true,
    }),
  ],

see https://medium.com/@alexander.forselius/experiment-combining-native-web-ios-android-and-macos-development-in-rectnative-part-1-ecd5887e9cfc

Answer 2

I solved it by making it depend on the webpack mode input.

In webpack.config.js:

const config = {
  ...
  plugins: [],
  ...
}

module.exports = (env, argv) => {
  config.plugins.push(new webpack.DefinePlugin({
    __DEV__: JSON.stringify(argv.mode !== 'production'),
  }));

  return config;
};