fix: make webpack 5 work with crypto libs

lifinance · Feb 9, 2022 · 6106b95 · 6106b95
1 parent 52a17ec
commit 6106b95
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/libs/react-scripts/config/env.js b/libs/react-scripts/config/env.js
@@ -40,7 +40,7 @@ const dotenvFiles = [
 // https://github.com/motdotla/dotenv-expand
 dotenvFiles.forEach((dotenvFile) => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
+    require('dotenv-expand').expand(
       require('dotenv').config({
         path: dotenvFile,
       }),
@@ -64,9 +64,9 @@ process.env.NODE_PATH = (process.env.NODE_PATH || '')
   .map((folder) => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// Grab NODE_ENV and LIFI_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
+const REACT_APP = /^LIFI_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)

diff --git a/libs/react-scripts/config/webpack.config.js b/libs/react-scripts/config/webpack.config.js
@@ -382,6 +382,19 @@ module.exports = function (webpackEnv) {
           babelRuntimeRegenerator,
         ]),
       ],
+      fallback: {
+        assert: false,
+        buffer: require.resolve('buffer'),
+        crypto: require.resolve('crypto-browserify'),
+        fs: false,
+        http: false,
+        https: false,
+        net: false,
+        os: false,
+        stream: require.resolve('stream-browserify'),
+        tls: false,
+        url: false,
+      },
     },
     module: {
       strictExportPresence: true,
@@ -651,6 +664,12 @@ module.exports = function (webpackEnv) {
       ].filter(Boolean),
     },
     plugins: [
+      // Work around for Buffer is undefined:
+      // https://github.com/webpack/changelog-v5/issues/10
+      new webpack.ProvidePlugin({
+        process: "process/browser.js",
+        Buffer: ["buffer", "Buffer"],
+      }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(

diff --git a/libs/react-scripts/package.json b/libs/react-scripts/package.json
@@ -38,8 +38,10 @@
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
     "browserslist": "^4.18.1",
+    "buffer": "^6.0.3",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "crypto-browserify": "^3.12.0",
     "css-loader": "^6.6.0",
     "css-minimizer-webpack-plugin": "^3.2.0",
     "dotenv": "^16.0.0",
@@ -68,7 +70,9 @@
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.3.0",
     "semver": "^7.3.5",
+    "source-map-explorer": "^2.5.2",
     "source-map-loader": "^3.0.0",
+    "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.19",
     "terser-webpack-plugin": "^5.3.1",