perf: node requires >= 12.20.0 when using webpack@5

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "start": "pnpm start --filter=@mometa/editor",
+    "start:app:cr:debug": "pnpm run start:cr:debug --filter=@mometa/app",
     "start:app:cr": "pnpm run start:cr --filter=@mometa/app",
     "test": "npx jest",
     "test:watch": "npm test -- --watch",

packages/app/config/webpackDevServer.config.js

@@ -100,19 +100,23 @@ module.exports = function (proxy, allowedHost) {
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    onBeforeSetupMiddleware(devServer) {
-      // Keep `evalSourceMapMiddleware`
-      // middlewares before `redirectServedPath` otherwise will not have any effect
-      // This lets us fetch source contents from webpack for the error overlay
-      devServer.app.use(evalSourceMapMiddleware(devServer))
+    setupMiddlewares(middlewares, devServer) {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined')
+      }
 
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
         require(paths.proxySetup)(devServer.app)
       }
-    },
-    onAfterSetupMiddleware(devServer) {
-      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+
+      middlewares.unshift(
+        // Keep `evalSourceMapMiddleware`
+        // middlewares before `redirectServedPath` otherwise will not have any effect
+        // This lets us fetch source contents from webpack for the error overlay
+        evalSourceMapMiddleware(devServer)
+      )
+
       devServer.app.use(redirectServedPath(paths.publicUrlOrPath))
 
       // This service worker file is effectively a 'no-op' that will reset any
@@ -121,6 +125,7 @@ module.exports = function (proxy, allowedHost) {
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
       devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath))
+      return middlewares
     }
   }
 }

packages/app/package.json

@@ -76,7 +76,8 @@
     "workbox-webpack-plugin": "^6.4.1"
   },
   "scripts": {
-    "start:cr": "CLIENT_RENDER=1 node scripts/start.js",
+    "start:cr": "NODE_OPTIONS=\"$INNER_NODE_OPTIONS\" CLIENT_RENDER=1 node scripts/start.js",
+    "start:cr:debug": "INNER_NODE_OPTIONS=--inspect npm run start:cr",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js"
   },

packages/editor/package.json

@@ -52,6 +52,7 @@
     "lodash.isequal": "^4.5.0",
     "memoize-fn": "^2.0.1",
     "object-hash": "^2.2.0",
+    "please-upgrade-node": "^3.2.0",
     "schema-utils": "^3.0.0",
     "shell-quote": "^1.7.2"
   },

packages/editor/webpack/index.js

@@ -10,6 +10,8 @@ const ReactRefreshWebpackPlugin = require('@mometa/react-refresh-webpack-plugin'
 const { materialExplorer } = require('@mometa/materials-resolver')
 const { robust } = require('memoize-fn')
 
+const pkg = require('../package.json')
+
 const BUILD_PATH = nps.resolve(__dirname, '../build/standalone')
 const NAME = 'MometaEditorPlugin'
 
@@ -236,6 +238,15 @@ module.exports = class MometaEditorPlugin extends CommonPlugin {
   }
 
   apply(compiler) {
+    if (this.getWebpackMajor(compiler) === 5) {
+      require('please-upgrade-node')({
+        name: pkg.name,
+        engines: {
+          node: '>= 12.20.0'
+        }
+      })
+    }
+
     this.applyForEditor(compiler)
     this.applyForRuntime(compiler)
     this.applyForServer(compiler)