Try to find a different way to include unminified React in development

bobsilverberg commented 2 years ago

There is some code in webpack.dev.config.babel.js that loads unminified versions of the React libraries when we are running in development. The comment around this code says:

// Load unminified React and Redux in development to get better error
// messages, because they use
// [Invariant](https://github.com/zertosh/invariant) which hides error
// messages in the production build.

It replaces the default libraries with files in the /umd/ folder, (e.g., react/umd/react.development.js), but those files no longer exist in the most recent version of React. We can therefore no longer include those files.

I have done some Googling to try to see if there is another way of accomplishing what we were trying to do here, but have come up empty. In order to have this not block our dependency update, I have commented out this code.

This issue is about looking into this further and trying to determine if we really still need this, and if so, how else we might accomplish this.

┆Issue is synchronized with this Jira Task

ziir commented 1 year ago

This shouldn't be needed indeed. I'm guessing it was like this due to the use of process.env.NODE_ENV = 'production' via DefinePlugin in the common webpack configuration, which is also not needed (redundant with webpack's mode for a while), and is also incorrect (it may result in bundling the development version of dependencies, but with production behavior).

The following would be correct, should be 100% safe, result in a better developer experience & slightly faster builds:

diff --git a/webpack-common.js b/webpack-common.js
index e106bdd15..cb628585e 100644
--- a/webpack-common.js
+++ b/webpack-common.js
@@ -113,7 +113,6 @@ export function getPlugins({ withBrowserWindow = true } = {}) {
   const plugins = [
     new webpack.DefinePlugin({
       CLIENT_CONFIG: JSON.stringify(clientConfig),
-      'process.env.NODE_ENV': JSON.stringify('production'),
     }),

diff --git a/webpack.dev.config.babel.js b/webpack.dev.config.babel.js
index f92453a89..c5c98d122 100644
--- a/webpack.dev.config.babel.js
+++ b/webpack.dev.config.babel.js
@@ -55,23 +55,6 @@ export default {
   },
   plugins: [
     ...getPlugins(),
-    // Load unminified React and Redux in development to get better error
-    // messages, because they use
-    // [Invariant](https://github.com/zertosh/invariant) which hides error
-    // messages in the production build.
-    //
-    // We can no longer load the React versions from /umd/ as it no longer
-    // exists.
-    // See https://github.com/mozilla/addons/issues/2169
-    // new webpack.NormalModuleReplacementPlugin(
-    //   /^react$/,
-    //   'react/umd/react.development.js',
-    // ),
-    // new webpack.NormalModuleReplacementPlugin(
-    //   /^react-dom$/,
-    //   'react-dom/umd/react-dom.development.js',
-    // ),
-    new webpack.NormalModuleReplacementPlugin(/^redux$/, 'redux/dist/redux.js'),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.IgnorePlugin({ resourceRegExp: /webpack-stats\.json$/ }),
     webpackIsomorphicToolsPlugin.development(),

mozilla / addons

Try to find a different way to include unminified React in development #2169