From be523c07898def10d6e65ae871b55e1a9d874e61 Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Fri, 2 Dec 2022 19:46:44 -0800 Subject: [PATCH 1/3] webpack: Add specific entries instead of redefining process.env MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Based on a warning in the DefinePlugin docs¹, previous usage of a "process.env" key has the potential to break any modules that might use the process.env object. Luckily (so far) there is no such conflict in this project, but good to future-proof. ¹ https://v4.webpack.js.org/plugins/define-plugin/#usage --- webpack.config.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 7940f4f6e..d7590f21e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -67,10 +67,8 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze /* plugins */ /* inject strings into the client-accessible process.env */ const pluginProcessEnvData = new webpack.DefinePlugin({ - "process.env": { - NODE_ENV: devMode ? JSON.stringify("development") : JSON.stringify("production"), - EXTENSION_DATA: JSON.stringify(extensionData) - } + "process.env.NODE_ENV": devMode ? JSON.stringify("development") : JSON.stringify("production"), + "process.env.EXTENSION_DATA": JSON.stringify(extensionData) }); /* gzip everything - https://github.com/webpack-contrib/compression-webpack-plugin */ const pluginCompress = new CompressionPlugin({ From 19723f72b2fab26d61101745bb3a721cd6c8c1e4 Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Fri, 2 Dec 2022 19:55:06 -0800 Subject: [PATCH 2/3] webpack: Use webpackConfig scope for client-side variables The process.env scope is commonly used in Node.js projects to contain variables injected from an external context. For Webpack, the scope can be any arbitrary name. "webpackConfig" is more self-describing and avoids potential confusion for someone searching the codebase. Without this change, one might suspect that `process.env.PORT` referenced in cli/ files comes from the same source as `process.env.NODE_ENV` when that's not the case - they are entirely independent. --- src/index.js | 2 +- src/store/index.js | 2 +- src/util/extensions.js | 6 +++--- src/util/googleAnalytics.js | 2 +- webpack.config.js | 12 ++++++------ 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index 9c3c6a623..aa1efd760 100644 --- a/src/index.js +++ b/src/index.js @@ -44,7 +44,7 @@ i18n fallbackLng: "en", /* To debug any errors w.r.t. i18n, swith the second `false` to `true` (and this can be kept even after deployment if needed) */ - debug: process.env.NODE_ENV === 'production' ? false : false, // eslint-disable-line + debug: webpackConfig.NODE_ENV === 'production' ? false : false, // eslint-disable-line interpolation: { escapeValue: false }, diff --git a/src/store/index.js b/src/store/index.js index 31560da01..374f15457 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -17,7 +17,7 @@ const configureStore = (initialState) => { window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f ); const store = createStore(rootReducer, initialState, composedEnhancers); - if (process.env.NODE_ENV !== 'production' && module.hot) { + if (webpackConfig.NODE_ENV !== 'production' && module.hot) { // console.log("hot reducer reload"); // eslint-disable-line module.hot.accept('../reducers', () => { const nextRootReducer = require('../reducers/index'); // eslint-disable-line global-require diff --git a/src/util/extensions.js b/src/util/extensions.js index 515918410..87b988c3d 100644 --- a/src/util/extensions.js +++ b/src/util/extensions.js @@ -1,12 +1,12 @@ const registry = (() => { - if (!process.env.EXTENSION_DATA) { + if (!webpackConfig.EXTENSION_DATA) { // console.log("no EXTENSION_DATA found"); return {}; } - const extensions = typeof process.env.EXTENSION_DATA === "string" ? - JSON.parse(process.env.EXTENSION_DATA) : process.env.EXTENSION_DATA; + const extensions = typeof webpackConfig.EXTENSION_DATA === "string" ? + JSON.parse(webpackConfig.EXTENSION_DATA) : webpackConfig.EXTENSION_DATA; Object.keys(extensions).forEach((key) => { if (key.endsWith("Component")) { diff --git a/src/util/googleAnalytics.js b/src/util/googleAnalytics.js index a4f6e5ed2..fb1ed68e2 100644 --- a/src/util/googleAnalytics.js +++ b/src/util/googleAnalytics.js @@ -10,7 +10,7 @@ export const initialiseGoogleAnalyticsIfRequired = async () => { } importReactGa = import("react-ga"); ReactGA = (await importReactGa).default; - if (process.env.NODE_ENV !== "production") { + if (webpackConfig.NODE_ENV !== "production") { // eslint-disable-next-line console.log("Not setting up Google Analytics as we are not in production mode"); return; diff --git a/webpack.config.js b/webpack.config.js index d7590f21e..1cfdd8aa6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -65,10 +65,10 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze } /* plugins */ - /* inject strings into the client-accessible process.env */ - const pluginProcessEnvData = new webpack.DefinePlugin({ - "process.env.NODE_ENV": devMode ? JSON.stringify("development") : JSON.stringify("production"), - "process.env.EXTENSION_DATA": JSON.stringify(extensionData) + /* inject client-accessible variables */ + const pluginClientVariables = new webpack.DefinePlugin({ + "webpackConfig.NODE_ENV": devMode ? JSON.stringify("development") : JSON.stringify("production"), + "webpackConfig.EXTENSION_DATA": JSON.stringify(extensionData) }); /* gzip everything - https://github.com/webpack-contrib/compression-webpack-plugin */ const pluginCompress = new CompressionPlugin({ @@ -87,13 +87,13 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze const plugins = devMode ? [ new LodashModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(), - pluginProcessEnvData, + pluginClientVariables, new webpack.NoEmitOnErrorsPlugin(), pluginHtml, cleanWebpackPlugin ] : [ new LodashModuleReplacementPlugin(), - pluginProcessEnvData, + pluginClientVariables, pluginCompress, pluginHtml, cleanWebpackPlugin From 080d8d7d7668cac06a112d877148efc0fa9c1be5 Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Fri, 2 Dec 2022 20:35:13 -0800 Subject: [PATCH 3/3] fixup! webpack: Use webpackConfig scope for client-side variables Add global to ESLint config --- .eslintrc | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc b/.eslintrc index b84807ad0..93f3338af 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,6 +8,7 @@ globals: context: true jestPuppeteer: true BASE_URL: true + webpackConfig: true rules: camelcase: off # require camel case names prefer-template: off