Webpack 5

packages/react-error-overlay/package.json

@@ -64,7 +64,7 @@
     "settle-promise": "1.0.0",
     "source-map": "0.5.6",
     "terser-webpack-plugin": "2.3.0",
-    "webpack": "^4.35.0"
+    "webpack": "5.0.0-beta.9"
   },
   "jest": {
     "setupFiles": [
@@ -83,5 +83,8 @@
       "/fixtures/",
       "setupJest.js"
     ]
+  },
+  "dependencies": {
+    "path-browserify": "^1.0.0"
   }
 }

packages/react-error-overlay/src/utils/unmapper.js

@@ -9,7 +9,7 @@
 import StackFrame from './stack-frame';
 import { getSourceMap } from './getSourceMap';
 import { getLinesAround } from './getLinesAround';
-import path from 'path';
+import path from 'path-browserify';
 
 function count(search: string, string: string): number {
   // Count starts at -1 because a do-while loop always runs at least once

packages/react-error-overlay/webpack.config.js

@@ -38,10 +38,11 @@ module.exports = {
   optimization: {
     nodeEnv: false,
   },
-  node: {
-    fs: 'empty',
-    process: false,
-  },
+  // todo: Update before final webpack 5 release
+  // node: {
+  //   fs: 'empty',
+  //   process: false,
+  // },
   performance: {
     hints: false,
   },

packages/react-scripts/config/webpack.config.js

@@ -186,8 +186,6 @@ module.exports = function(webpackEnv) {
       filename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].js'
         : isEnvDevelopment && 'static/js/bundle.js',
-      // TODO: remove this when upgrading to webpack 5
-      futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
       chunkFilename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].chunk.js'
@@ -676,7 +674,10 @@ module.exports = function(webpackEnv) {
       // solution that requires the user to opt into importing specific locales.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the Webpack build.
       isEnvProduction &&
@@ -725,16 +726,17 @@ module.exports = function(webpackEnv) {
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
+    // todo: Update before final webpack 5 release
+    // node: {
+    //   module: 'empty',
+    //   dgram: 'empty',
+    //   dns: 'mock',
+    //   fs: 'empty',
+    //   http2: 'empty',
+    //   net: 'empty',
+    //   tls: 'empty',
+    //   child_process: 'empty',
+    // },
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,

packages/react-scripts/package.json

@@ -76,8 +76,8 @@
     "terser-webpack-plugin": "2.3.0",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",
-    "webpack": "4.41.2",
-    "webpack-dev-server": "3.9.0",
+    "webpack": "5.0.0-beta.9",
+    "webpack-dev-server": "3.10.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "4.3.1"
   },