From 166d87248702b19f25e22d177cfcd3c6d8b11105 Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Wed, 15 Dec 2021 17:56:02 +0100
Subject: [PATCH 1/8] Add support for nodejs builtins

---
 docusaurus/docs/nodejs-builtin-fallbacks.md   | 37 +++++++++++
 docusaurus/website/sidebars.json              |  1 +
 .../config/nodeBuiltinFallbacks.js            | 66 +++++++++++++++++++
 .../react-scripts/config/webpack.config.js    |  6 ++
 4 files changed, 110 insertions(+)
 create mode 100644 docusaurus/docs/nodejs-builtin-fallbacks.md
 create mode 100644 packages/react-scripts/config/nodeBuiltinFallbacks.js

diff --git a/docusaurus/docs/nodejs-builtin-fallbacks.md b/docusaurus/docs/nodejs-builtin-fallbacks.md
new file mode 100644
index 00000000000..a849d165946
--- /dev/null
+++ b/docusaurus/docs/nodejs-builtin-fallbacks.md
@@ -0,0 +1,37 @@
+---
+id: nodejs-builtin-fallbacks
+title: NodeJS builtin fallbacks
+---
+
+NodeJS builtin fallbacks enable you to import NodeJS builtin modules meant for Node and fallback to browser specific modules.
+
+If your application dependens on a package using NodeJS builtin modules it will require a fallback to run in the browser.
+
+Example of error message:
+
+```
+> yarn build
+Creating an optimized production build...
+Failed to compile.
+
+Module not found: Error: Can't resolve 'url' in '...'
+BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
+This is no longer the case. Verify if you need this module and configure a polyfill for it.
+
+If you want to include a polyfill, you need to:
+	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
+	- install 'url'
+If you don't want to include a polyfill, you can use an empty module like this:
+	resolve.fallback: { "url": false }
+>
+```
+
+To resolve this error you would need to install the package `url` in your project.
+
+```bash
+npm install url
+# or..
+yarn add url
+```
+
+_(We don't support to not include the polyfill if needed)_
diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json
index 386a29da1bf..4bfaa896694 100644
--- a/docusaurus/website/sidebars.json
+++ b/docusaurus/website/sidebars.json
@@ -52,6 +52,7 @@
       "can-i-use-decorators",
       "pre-rendering-into-static-html-files",
       "advanced-configuration",
+      "nodejs-builtin-fallbacks",
       "alternatives-to-ejecting"
     ],
     "Support": ["troubleshooting"]
diff --git a/packages/react-scripts/config/nodeBuiltinFallbacks.js b/packages/react-scripts/config/nodeBuiltinFallbacks.js
new file mode 100644
index 00000000000..dc96ac87ba4
--- /dev/null
+++ b/packages/react-scripts/config/nodeBuiltinFallbacks.js
@@ -0,0 +1,66 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const paths = require('./paths');
+
+const builtinFallbackMap = {
+  // Reference: https://github.com/webpack/webpack/blob/c181294865dca01b28e6e316636fef5f2aad4eb6/lib/ModuleNotFoundError.js#L13
+  assert: 'assert/',
+  buffer: 'buffer/',
+  console: 'console-browserify',
+  constants: 'constants-browserify',
+  crypto: 'crypto-browserify',
+  domain: 'domain-browser',
+  events: 'events/',
+  http: 'stream-http',
+  https: 'https-browserify',
+  os: 'os-browserify/browser',
+  path: 'path-browserify',
+  punycode: 'punycode/',
+  process: 'process/browser',
+  querystring: 'querystring-es3',
+  stream: 'stream-browserify',
+  _stream_duplex: 'readable-stream/duplex',
+  _stream_passthrough: 'readable-stream/passthrough',
+  _stream_readable: 'readable-stream/readable',
+  _stream_transform: 'readable-stream/transform',
+  _stream_writable: 'readable-stream/writable',
+  string_decoder: 'string_decoder/',
+  sys: 'util/',
+  timers: 'timers-browserify',
+  tty: 'tty-browserify',
+  url: 'url/',
+  util: 'util/',
+  vm: 'vm-browserify',
+  zlib: 'browserify-zlib',
+};
+
+const fallbacks = {};
+
+const appPackageJson = require(paths.appPackageJson);
+
+for (const [nodeModule, fallbackModule] of Object.entries(builtinFallbackMap)) {
+  const [fallbackModuleName] = fallbackModule.split('/');
+
+  if (appPackageJson.dependencies[fallbackModuleName]) {
+    // Check app package.json for fallback dependency making sure we use project installed fallbacks
+    try {
+      // Use installed fallback
+      fallbacks[nodeModule] = require.resolve(fallbackModule);
+    } catch (e) {
+      // If ever fallback resolve failed
+    }
+  }
+}
+
+module.exports = {
+  fallbacks,
+  fallbackEntries: Object.values(fallbacks),
+};
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 2b1b3bbd47d..df0c4df8304 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -37,6 +37,7 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
+const nodeBuiltin = require('./nodeBuiltinFallbacks');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -301,6 +302,10 @@ module.exports = function (webpackEnv) {
       ],
     },
     resolve: {
+      // This adds support for node builins
+      fallback: {
+        ...nodeBuiltin.fallbacks,
+      },
       // This allows you to set a fallback for where webpack should look for modules.
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
@@ -341,6 +346,7 @@ module.exports = function (webpackEnv) {
           babelRuntimeEntry,
           babelRuntimeEntryHelpers,
           babelRuntimeRegenerator,
+          ...nodeBuiltin.fallbackEntries,
         ]),
       ],
     },

From 5e831150fa1edd47d51fd1ad5daa4ae201e4591c Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Wed, 15 Dec 2021 17:56:27 +0100
Subject: [PATCH 2/8] Update package-lock

---
 package-lock.json | 166 +++++++++++++++++++++++++++-------------------
 1 file changed, 99 insertions(+), 67 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb9eb9c7bc4..2a1a96eb86f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "create-react-app",
       "hasInstallScript": true,
       "workspaces": [
         "packages/*"
@@ -25838,7 +25837,7 @@
       }
     },
     "packages/babel-plugin-named-asset-import": {
-      "version": "0.3.7",
+      "version": "0.3.8",
       "license": "MIT",
       "devDependencies": {
         "babel-plugin-tester": "^10.1.0",
@@ -25849,7 +25848,7 @@
       }
     },
     "packages/babel-preset-react-app": {
-      "version": "10.0.0",
+      "version": "10.0.1",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
@@ -25871,28 +25870,28 @@
       }
     },
     "packages/confusing-browser-globals": {
-      "version": "1.0.10",
+      "version": "1.0.11",
       "license": "MIT",
       "devDependencies": {
         "jest": "^27.4.3"
       }
     },
     "packages/cra-template": {
-      "version": "1.1.2",
+      "version": "1.1.3",
       "license": "MIT",
       "engines": {
         "node": ">=14"
       }
     },
     "packages/cra-template-typescript": {
-      "version": "1.1.2",
+      "version": "1.1.3",
       "license": "MIT",
       "engines": {
         "node": ">=14"
       }
     },
     "packages/create-react-app": {
-      "version": "4.0.3",
+      "version": "5.0.0",
       "license": "MIT",
       "dependencies": {
         "chalk": "^4.1.2",
@@ -25933,7 +25932,7 @@
       }
     },
     "packages/eslint-config-react-app": {
-      "version": "6.0.0",
+      "version": "7.0.0",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
@@ -25941,8 +25940,8 @@
         "@rushstack/eslint-patch": "^1.1.0",
         "@typescript-eslint/eslint-plugin": "^5.5.0",
         "@typescript-eslint/parser": "^5.5.0",
-        "babel-preset-react-app": "^10.0.0",
-        "confusing-browser-globals": "^1.0.10",
+        "babel-preset-react-app": "^10.0.1",
+        "confusing-browser-globals": "^1.0.11",
         "eslint-plugin-flowtype": "^8.0.3",
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-jest": "^25.3.0",
@@ -25959,7 +25958,7 @@
       }
     },
     "packages/react-app-polyfill": {
-      "version": "2.0.0",
+      "version": "3.0.0",
       "license": "MIT",
       "dependencies": {
         "core-js": "^3.19.2",
@@ -25974,7 +25973,7 @@
       }
     },
     "packages/react-dev-utils": {
-      "version": "11.0.4",
+      "version": "12.0.0",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.16.0",
@@ -25996,7 +25995,7 @@
         "open": "^8.4.0",
         "pkg-up": "^3.1.0",
         "prompts": "^2.4.2",
-        "react-error-overlay": "^6.0.9",
+        "react-error-overlay": "^6.0.10",
         "recursive-readdir": "^2.2.2",
         "shell-quote": "^1.7.3",
         "strip-ansi": "^6.0.1",
@@ -26019,7 +26018,7 @@
       }
     },
     "packages/react-error-overlay": {
-      "version": "6.0.9",
+      "version": "6.0.10",
       "license": "MIT",
       "devDependencies": {
         "@babel/code-frame": "^7.16.0",
@@ -26027,12 +26026,12 @@
         "anser": "^2.1.0",
         "babel-jest": "^27.4.2",
         "babel-loader": "^8.2.3",
-        "babel-preset-react-app": "^10.0.0",
+        "babel-preset-react-app": "^10.0.1",
         "chalk": "^4.1.2",
         "chokidar": "^3.5.2",
         "cross-env": "^7.0.3",
         "eslint": "^8.3.0",
-        "eslint-config-react-app": "^6.0.0",
+        "eslint-config-react-app": "^7.0.0",
         "flow-bin": "^0.116.0",
         "html-entities": "^2.3.2",
         "jest": "^27.4.3",
@@ -26041,7 +26040,7 @@
         "promise": "^8.1.0",
         "raw-loader": "^4.0.2",
         "react": "^17.0.2",
-        "react-app-polyfill": "^2.0.0",
+        "react-app-polyfill": "^3.0.0",
         "react-dom": "^17.0.2",
         "rimraf": "^3.0.2",
         "settle-promise": "^1.0.0",
@@ -26059,7 +26058,7 @@
       }
     },
     "packages/react-scripts": {
-      "version": "4.0.3",
+      "version": "5.0.0",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
@@ -26067,8 +26066,8 @@
         "@svgr/webpack": "^5.5.0",
         "babel-jest": "^27.4.2",
         "babel-loader": "^8.2.3",
-        "babel-plugin-named-asset-import": "^0.3.7",
-        "babel-preset-react-app": "^10.0.0",
+        "babel-plugin-named-asset-import": "^0.3.8",
+        "babel-preset-react-app": "^10.0.1",
         "bfj": "^7.0.2",
         "browserslist": "^4.18.1",
         "camelcase": "^6.2.1",
@@ -26078,7 +26077,7 @@
         "dotenv": "^10.0.0",
         "dotenv-expand": "^5.1.0",
         "eslint": "^8.3.0",
-        "eslint-config-react-app": "^6.0.0",
+        "eslint-config-react-app": "^7.0.0",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
@@ -26094,8 +26093,8 @@
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
-        "react-app-polyfill": "^2.0.0",
-        "react-dev-utils": "^11.0.4",
+        "react-app-polyfill": "^3.0.0",
+        "react-dev-utils": "^12.0.0",
         "react-refresh": "^0.11.0",
         "resolve": "^1.20.0",
         "resolve-url-loader": "^4.0.0",
@@ -29113,7 +29112,8 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
       "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@octokit/plugin-rest-endpoint-methods": {
       "version": "5.13.0",
@@ -30199,12 +30199,14 @@
     "acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
-      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "requires": {}
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -30316,7 +30318,8 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "requires": {}
     },
     "alex": {
       "version": "8.2.0",
@@ -32990,7 +32993,8 @@
     "css-blank-pseudo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-2.0.0.tgz",
-      "integrity": "sha512-n7fxEOyuvAVPLPb9kL4XTIK/gnp2fKQ7KFQ+9lj60W9pDn/jTr5LjS/kHHm+rES/YJ3m0S6+uJgYSuAJg9zOyA=="
+      "integrity": "sha512-n7fxEOyuvAVPLPb9kL4XTIK/gnp2fKQ7KFQ+9lj60W9pDn/jTr5LjS/kHHm+rES/YJ3m0S6+uJgYSuAJg9zOyA==",
+      "requires": {}
     },
     "css-declaration-sorter": {
       "version": "6.1.3",
@@ -33087,7 +33091,8 @@
     "css-prefers-color-scheme": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-5.0.0.tgz",
-      "integrity": "sha512-XpzVrdwbppHm+Nnrzcb/hQb8eq1aKv4U8Oh59LsLfTsbIZZ6Fvn9razb66ihH2aTJ0VhO9n9sVm8piyKXJAZMA=="
+      "integrity": "sha512-XpzVrdwbppHm+Nnrzcb/hQb8eq1aKv4U8Oh59LsLfTsbIZZ6Fvn9razb66ihH2aTJ0VhO9n9sVm8piyKXJAZMA==",
+      "requires": {}
     },
     "css-select": {
       "version": "4.1.3",
@@ -33186,7 +33191,8 @@
     "cssnano-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
-      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ=="
+      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -34028,8 +34034,8 @@
         "@rushstack/eslint-patch": "^1.1.0",
         "@typescript-eslint/eslint-plugin": "^5.5.0",
         "@typescript-eslint/parser": "^5.5.0",
-        "babel-preset-react-app": "^10.0.0",
-        "confusing-browser-globals": "^1.0.10",
+        "babel-preset-react-app": "^10.0.1",
+        "confusing-browser-globals": "^1.0.11",
         "eslint-plugin-flowtype": "^8.0.3",
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-jest": "^25.3.0",
@@ -34267,7 +34273,8 @@
     "eslint-plugin-react-hooks": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
-      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA=="
+      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
+      "requires": {}
     },
     "eslint-plugin-testing-library": {
       "version": "5.0.1",
@@ -36200,7 +36207,8 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "requires": {}
     },
     "idb": {
       "version": "6.1.5",
@@ -37171,7 +37179,8 @@
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.4.0",
@@ -39994,7 +40003,8 @@
     "postcss-browser-comments": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
-      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg=="
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
+      "requires": {}
     },
     "postcss-calc": {
       "version": "8.0.0",
@@ -40051,7 +40061,8 @@
     "postcss-custom-media": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
-      "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g=="
+      "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
+      "requires": {}
     },
     "postcss-custom-properties": {
       "version": "12.0.0",
@@ -40080,22 +40091,26 @@
     "postcss-discard-comments": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
-      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg=="
+      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
-      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA=="
+      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
-      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw=="
+      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
-      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q=="
+      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
+      "requires": {}
     },
     "postcss-double-position-gradients": {
       "version": "3.0.1",
@@ -40116,27 +40131,32 @@
     "postcss-flexbugs-fixes": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
+      "requires": {}
     },
     "postcss-focus-visible": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-6.0.1.tgz",
-      "integrity": "sha512-UddLlBmJ78Nu7OrKME70EKxCPBdxTx7pKIyD3GDNRM8Tnq19zmscT9QzsvR8gygz0i0nNUjMtSz4N3AEWZ5R/Q=="
+      "integrity": "sha512-UddLlBmJ78Nu7OrKME70EKxCPBdxTx7pKIyD3GDNRM8Tnq19zmscT9QzsvR8gygz0i0nNUjMtSz4N3AEWZ5R/Q==",
+      "requires": {}
     },
     "postcss-focus-within": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-5.0.1.tgz",
-      "integrity": "sha512-50v1AZVlFSVzLTNdBQG521Aa54VABf/X1RkhR8Fm/9dDQby0W0XdwOnuo8Juvf0ZZXbKkxyTkyyQD0QaNVZVGg=="
+      "integrity": "sha512-50v1AZVlFSVzLTNdBQG521Aa54VABf/X1RkhR8Fm/9dDQby0W0XdwOnuo8Juvf0ZZXbKkxyTkyyQD0QaNVZVGg==",
+      "requires": {}
     },
     "postcss-font-variant": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
-      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+      "requires": {}
     },
     "postcss-gap-properties": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.0.tgz",
-      "integrity": "sha512-QJOkz1epC/iCuOdhQPm3n9T+F25+P+MYJEEcs5xz/Q+020mc9c6ZRGJkzPJd8FS9hFmT9eEKFEx9PEDl+lH5og=="
+      "integrity": "sha512-QJOkz1epC/iCuOdhQPm3n9T+F25+P+MYJEEcs5xz/Q+020mc9c6ZRGJkzPJd8FS9hFmT9eEKFEx9PEDl+lH5og==",
+      "requires": {}
     },
     "postcss-image-set-function": {
       "version": "4.0.2",
@@ -40149,7 +40169,8 @@
     "postcss-initial": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
-      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ=="
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
+      "requires": {}
     },
     "postcss-js": {
       "version": "3.0.3",
@@ -40202,12 +40223,14 @@
     "postcss-logical": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.0.tgz",
-      "integrity": "sha512-fWEWMn/xf6F9SMzAD7OS0GTm8Qh1BlBmEbVT/YZGYhwipQEwOpO7YOOu+qnzLksDg9JjLRj5tLmeN8OW8+ogIA=="
+      "integrity": "sha512-fWEWMn/xf6F9SMzAD7OS0GTm8Qh1BlBmEbVT/YZGYhwipQEwOpO7YOOu+qnzLksDg9JjLRj5tLmeN8OW8+ogIA==",
+      "requires": {}
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
-      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ=="
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
+      "requires": {}
     },
     "postcss-merge-longhand": {
       "version": "5.0.4",
@@ -40270,7 +40293,8 @@
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -40327,7 +40351,8 @@
     "postcss-normalize-charset": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
-      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg=="
+      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.0.1",
@@ -40411,12 +40436,14 @@
     "postcss-overflow-shorthand": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.0.tgz",
-      "integrity": "sha512-4fTapLT68wUoIr4m3Z0sKn1NbXX0lJYvj4aDA2++KpNx8wMSVf55UuLPz0nSjXa7dV1p0xQHlJ0iFJRNrSY2mw=="
+      "integrity": "sha512-4fTapLT68wUoIr4m3Z0sKn1NbXX0lJYvj4aDA2++KpNx8wMSVf55UuLPz0nSjXa7dV1p0xQHlJ0iFJRNrSY2mw==",
+      "requires": {}
     },
     "postcss-page-break": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
-      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+      "requires": {}
     },
     "postcss-place": {
       "version": "7.0.1",
@@ -40496,7 +40523,8 @@
     "postcss-replace-overflow-wrap": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
-      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "requires": {}
     },
     "postcss-selector-not": {
       "version": "5.0.0",
@@ -40863,7 +40891,8 @@
           "version": "8.2.3",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
           "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -41034,7 +41063,7 @@
         "open": "^8.4.0",
         "pkg-up": "^3.1.0",
         "prompts": "^2.4.2",
-        "react-error-overlay": "^6.0.9",
+        "react-error-overlay": "^6.0.10",
         "recursive-readdir": "^2.2.2",
         "shell-quote": "^1.7.3",
         "strip-ansi": "^6.0.1",
@@ -41067,12 +41096,12 @@
         "anser": "^2.1.0",
         "babel-jest": "^27.4.2",
         "babel-loader": "^8.2.3",
-        "babel-preset-react-app": "^10.0.0",
+        "babel-preset-react-app": "^10.0.1",
         "chalk": "^4.1.2",
         "chokidar": "^3.5.2",
         "cross-env": "^7.0.3",
         "eslint": "^8.3.0",
-        "eslint-config-react-app": "^6.0.0",
+        "eslint-config-react-app": "^7.0.0",
         "flow-bin": "^0.116.0",
         "html-entities": "^2.3.2",
         "jest": "^27.4.3",
@@ -41081,7 +41110,7 @@
         "promise": "^8.1.0",
         "raw-loader": "^4.0.2",
         "react": "^17.0.2",
-        "react-app-polyfill": "^2.0.0",
+        "react-app-polyfill": "^3.0.0",
         "react-dom": "^17.0.2",
         "rimraf": "^3.0.2",
         "settle-promise": "^1.0.0",
@@ -41115,8 +41144,8 @@
         "@svgr/webpack": "^5.5.0",
         "babel-jest": "^27.4.2",
         "babel-loader": "^8.2.3",
-        "babel-plugin-named-asset-import": "^0.3.7",
-        "babel-preset-react-app": "^10.0.0",
+        "babel-plugin-named-asset-import": "^0.3.8",
+        "babel-preset-react-app": "^10.0.1",
         "bfj": "^7.0.2",
         "browserslist": "^4.18.1",
         "camelcase": "^6.2.1",
@@ -41126,7 +41155,7 @@
         "dotenv": "^10.0.0",
         "dotenv-expand": "^5.1.0",
         "eslint": "^8.3.0",
-        "eslint-config-react-app": "^6.0.0",
+        "eslint-config-react-app": "^7.0.0",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
@@ -41144,8 +41173,8 @@
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
         "react": "^17.0.2",
-        "react-app-polyfill": "^2.0.0",
-        "react-dev-utils": "^11.0.4",
+        "react-app-polyfill": "^3.0.0",
+        "react-dev-utils": "^12.0.0",
         "react-dom": "^17.0.2",
         "react-refresh": "^0.11.0",
         "resolve": "^1.20.0",
@@ -42892,7 +42921,8 @@
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "requires": {}
     },
     "stylehacks": {
       "version": "5.0.1",
@@ -45193,7 +45223,8 @@
         "ws": {
           "version": "8.3.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.3.0.tgz",
-          "integrity": "sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw=="
+          "integrity": "sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw==",
+          "requires": {}
         }
       }
     },
@@ -45778,7 +45809,8 @@
     "ws": {
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
-      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA=="
+      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
+      "requires": {}
     },
     "x-is-string": {
       "version": "0.1.0",

From 944a50ab8005919091e8a6c016d79f7cc1dc706f Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Fri, 17 Dec 2021 13:56:21 +0100
Subject: [PATCH 3/8] Make default behavior to provide empty fallback modules

---
 packages/react-dev-utils/ModuleScopePlugin.js       | 13 +++++++++----
 .../react-scripts/config/nodeBuiltinFallbacks.js    |  4 ++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js
index e2c16ffd819..5d56c637e4c 100644
--- a/packages/react-dev-utils/ModuleScopePlugin.js
+++ b/packages/react-dev-utils/ModuleScopePlugin.js
@@ -15,7 +15,10 @@ class ModuleScopePlugin {
   constructor(appSrc, allowedFiles = []) {
     this.appSrcs = Array.isArray(appSrc) ? appSrc : [appSrc];
     this.allowedFiles = new Set(allowedFiles);
-    this.allowedPaths = [...allowedFiles].map(path.dirname).filter(p => path.relative(p, process.cwd()) !== '');
+    this.allowedPaths = [...allowedFiles]
+      .filter(Boolean)
+      .map(path.dirname)
+      .filter(p => path.relative(p, process.cwd()) !== '');
   }
 
   apply(resolver) {
@@ -54,9 +57,11 @@ class ModuleScopePlugin {
         if (this.allowedFiles.has(requestFullPath)) {
           return callback();
         }
-        if (this.allowedPaths.some((allowedFile) => {
-          return requestFullPath.startsWith(allowedFile);
-        })) {
+        if (
+          this.allowedPaths.some(allowedFile => {
+            return requestFullPath.startsWith(allowedFile);
+          })
+        ) {
           return callback();
         }
         // Find path from src to the requested file
diff --git a/packages/react-scripts/config/nodeBuiltinFallbacks.js b/packages/react-scripts/config/nodeBuiltinFallbacks.js
index dc96ac87ba4..78dfeedaaaf 100644
--- a/packages/react-scripts/config/nodeBuiltinFallbacks.js
+++ b/packages/react-scripts/config/nodeBuiltinFallbacks.js
@@ -47,6 +47,7 @@ const fallbacks = {};
 const appPackageJson = require(paths.appPackageJson);
 
 for (const [nodeModule, fallbackModule] of Object.entries(builtinFallbackMap)) {
+  fallbacks[nodeModule] = false; // Default don't include polyfills per default
   const [fallbackModuleName] = fallbackModule.split('/');
 
   if (appPackageJson.dependencies[fallbackModuleName]) {
@@ -56,6 +57,9 @@ for (const [nodeModule, fallbackModule] of Object.entries(builtinFallbackMap)) {
       fallbacks[nodeModule] = require.resolve(fallbackModule);
     } catch (e) {
       // If ever fallback resolve failed
+      console.error(
+        `Failed to load fallback module "${fallbackModule}" for "${nodeModule}"`
+      );
     }
   }
 }

From cb4a8a3a34fffc033278b1568b44da1bc07a5296 Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Fri, 17 Dec 2021 14:36:06 +0100
Subject: [PATCH 4/8] Add Proxy fallback module for nodejs builtin in
 development only for better DX

---
 .../config/defaultNodeBuiltinFallback.js      | 25 ++++++++++
 .../config/nodeBuiltinFallbacks.js            | 47 +++++++++++--------
 .../react-scripts/config/webpack.config.js    |  4 +-
 3 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 packages/react-scripts/config/defaultNodeBuiltinFallback.js

diff --git a/packages/react-scripts/config/defaultNodeBuiltinFallback.js b/packages/react-scripts/config/defaultNodeBuiltinFallback.js
new file mode 100644
index 00000000000..eeb62de2d4a
--- /dev/null
+++ b/packages/react-scripts/config/defaultNodeBuiltinFallback.js
@@ -0,0 +1,25 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = new Proxy(
+  {},
+  {
+    get: function developmentFallback(target, prop) {
+      if (['$$typeof', '__esModule'].includes(prop)) {
+        return target;
+      }
+
+      console.error(
+        `Error: Trying to access property "${prop}" of fallback module for NodeJS builtin module please read https://create-react-app.dev/docs/nodejs-builtin-fallbacks`
+      );
+      return false;
+    },
+  }
+);
diff --git a/packages/react-scripts/config/nodeBuiltinFallbacks.js b/packages/react-scripts/config/nodeBuiltinFallbacks.js
index 78dfeedaaaf..847a398c89f 100644
--- a/packages/react-scripts/config/nodeBuiltinFallbacks.js
+++ b/packages/react-scripts/config/nodeBuiltinFallbacks.js
@@ -42,29 +42,38 @@ const builtinFallbackMap = {
   zlib: 'browserify-zlib',
 };
 
-const fallbacks = {};
+function createNodeBuiltinFallbacks(webpackEnv) {
+  const fallbacks = {};
+  const isEnvProduction = webpackEnv === 'production';
 
-const appPackageJson = require(paths.appPackageJson);
+  const appPackageJson = require(paths.appPackageJson);
 
-for (const [nodeModule, fallbackModule] of Object.entries(builtinFallbackMap)) {
-  fallbacks[nodeModule] = false; // Default don't include polyfills per default
-  const [fallbackModuleName] = fallbackModule.split('/');
+  for (const [nodeModule, fallbackModule] of Object.entries(
+    builtinFallbackMap
+  )) {
+    const [fallbackModuleName] = fallbackModule.split('/');
+    fallbacks[nodeModule] = isEnvProduction
+      ? false // Default don't include polyfills per default in production
+      : require.resolve('./defaultNodeBuiltinFallback'); // Default polyfill in development for better DX
 
-  if (appPackageJson.dependencies[fallbackModuleName]) {
-    // Check app package.json for fallback dependency making sure we use project installed fallbacks
-    try {
-      // Use installed fallback
-      fallbacks[nodeModule] = require.resolve(fallbackModule);
-    } catch (e) {
-      // If ever fallback resolve failed
-      console.error(
-        `Failed to load fallback module "${fallbackModule}" for "${nodeModule}"`
-      );
+    if (appPackageJson.dependencies[fallbackModuleName]) {
+      // Check app package.json for fallback dependency making sure we use project installed fallbacks
+      try {
+        // Use installed fallback
+        fallbacks[nodeModule] = require.resolve(fallbackModule);
+      } catch (e) {
+        // If ever fallback resolve failed
+        console.error(
+          `Failed to load fallback module "${fallbackModule}" for "${nodeModule}"`
+        );
+      }
     }
   }
+
+  return {
+    fallbacks,
+    fallbackEntries: Object.values(fallbacks),
+  };
 }
 
-module.exports = {
-  fallbacks,
-  fallbackEntries: Object.values(fallbacks),
-};
+module.exports = createNodeBuiltinFallbacks;
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index df0c4df8304..2b33a8ab807 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -37,7 +37,7 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
-const nodeBuiltin = require('./nodeBuiltinFallbacks');
+const nodeBuiltinFallbacks = require('./nodeBuiltinFallbacks');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -115,6 +115,8 @@ module.exports = function (webpackEnv) {
 
   const shouldUseReactRefresh = env.raw.FAST_REFRESH;
 
+  const nodeBuiltin = nodeBuiltinFallbacks(webpackEnv);
+
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [

From e6b5b3ae1a311bbc3b0e46911f77dd306d0d1c73 Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Fri, 17 Dec 2021 17:28:59 +0100
Subject: [PATCH 5/8] Add legacy browser support and refactor + QA

---
 .../config/defaultNodeBuiltinFallback.js      | 25 ----------
 .../config/developmentNodeBuiltinFallback.js  | 50 +++++++++++++++++++
 .../config/nodeBuiltinFallbacks.js            | 10 ++--
 3 files changed, 57 insertions(+), 28 deletions(-)
 delete mode 100644 packages/react-scripts/config/defaultNodeBuiltinFallback.js
 create mode 100644 packages/react-scripts/config/developmentNodeBuiltinFallback.js

diff --git a/packages/react-scripts/config/defaultNodeBuiltinFallback.js b/packages/react-scripts/config/defaultNodeBuiltinFallback.js
deleted file mode 100644
index eeb62de2d4a..00000000000
--- a/packages/react-scripts/config/defaultNodeBuiltinFallback.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// @remove-on-eject-end
-'use strict';
-
-module.exports = new Proxy(
-  {},
-  {
-    get: function developmentFallback(target, prop) {
-      if (['$$typeof', '__esModule'].includes(prop)) {
-        return target;
-      }
-
-      console.error(
-        `Error: Trying to access property "${prop}" of fallback module for NodeJS builtin module please read https://create-react-app.dev/docs/nodejs-builtin-fallbacks`
-      );
-      return false;
-    },
-  }
-);
diff --git a/packages/react-scripts/config/developmentNodeBuiltinFallback.js b/packages/react-scripts/config/developmentNodeBuiltinFallback.js
new file mode 100644
index 00000000000..f704316b438
--- /dev/null
+++ b/packages/react-scripts/config/developmentNodeBuiltinFallback.js
@@ -0,0 +1,50 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const linkToDocumentation =
+  'https://create-react-app.dev/docs/nodejs-builtin-fallbacks';
+const defaultMessage = `(development mode) Error: Trying to access fallback module for NodeJS builtin module please read ${linkToDocumentation}`;
+
+const defaultExport = {
+  $$typeof: defaultMessage,
+  __esModule: {
+    value: true,
+  },
+};
+try {
+  // Modern browsers with Proxy support - Shows warning in $$type, default and specific imports
+  module.exports = new Proxy(
+    { ...defaultExport },
+    {
+      get: function developmentFallback(target, prop) {
+        if (['$$typeof', '__esModule'].includes(prop)) {
+          return target;
+        }
+
+        console.error(
+          `(development mode) Error: Trying to access property "${prop}" of fallback module for NodeJS builtin module please read ${linkToDocumentation}`
+        );
+        throw TypeError();
+      },
+    }
+  );
+} catch (error) {
+  // Legacy browsers without Proxy support - Limited to showing warnings in $$type and default
+  module.exports = {
+    ...defaultExport,
+  };
+
+  Object.defineProperty(module.exports, 'default', {
+    get: function () {
+      console.error(defaultMessage);
+      throw new TypeError();
+    },
+  });
+}
diff --git a/packages/react-scripts/config/nodeBuiltinFallbacks.js b/packages/react-scripts/config/nodeBuiltinFallbacks.js
index 847a398c89f..606d7fd547f 100644
--- a/packages/react-scripts/config/nodeBuiltinFallbacks.js
+++ b/packages/react-scripts/config/nodeBuiltinFallbacks.js
@@ -42,6 +42,9 @@ const builtinFallbackMap = {
   zlib: 'browserify-zlib',
 };
 
+const disableDevelopmentFallback =
+  process.env.DISABLE_MISSING_NODEJS_BUILTIN_MODULE_FALLBACK_WARNING === 'true';
+
 function createNodeBuiltinFallbacks(webpackEnv) {
   const fallbacks = {};
   const isEnvProduction = webpackEnv === 'production';
@@ -52,9 +55,10 @@ function createNodeBuiltinFallbacks(webpackEnv) {
     builtinFallbackMap
   )) {
     const [fallbackModuleName] = fallbackModule.split('/');
-    fallbacks[nodeModule] = isEnvProduction
-      ? false // Default don't include polyfills per default in production
-      : require.resolve('./defaultNodeBuiltinFallback'); // Default polyfill in development for better DX
+    fallbacks[nodeModule] =
+      isEnvProduction || disableDevelopmentFallback
+        ? false // Default don't include polyfills per default in production
+        : require.resolve('./developmentNodeBuiltinFallback'); // Default polyfill in development for better DX
 
     if (appPackageJson.dependencies[fallbackModuleName]) {
       // Check app package.json for fallback dependency making sure we use project installed fallbacks

From 46b4e0c905d10fb7944e2065eb5395e5a96ed73e Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Fri, 17 Dec 2021 18:20:39 +0100
Subject: [PATCH 6/8] Add development fallbacks per module to improve DX

---
 .../_stream_duplex.js                         | 13 +++++
 .../_stream_passthrough.js                    | 13 +++++
 .../_stream_readable.js                       | 13 +++++
 .../_stream_transform.js                      | 13 +++++
 .../_stream_writable.js                       | 13 +++++
 .../developmentBuiltinFallbacks/assert.js     | 11 ++++
 .../developmentBuiltinFallbacks/buffer.js     | 11 ++++
 .../developmentBuiltinFallbacks/console.js    | 11 ++++
 .../developmentBuiltinFallbacks/constants.js  | 11 ++++
 .../createDevelopmentNodeBuiltinFallback.js   | 49 ++++++++++++++++++
 .../developmentBuiltinFallbacks/crypto.js     | 11 ++++
 .../developmentBuiltinFallbacks/domain.js     | 11 ++++
 .../developmentBuiltinFallbacks/events.js     | 11 ++++
 .../developmentBuiltinFallbacks/http.js       | 11 ++++
 .../developmentBuiltinFallbacks/https.js      | 11 ++++
 .../config/developmentBuiltinFallbacks/os.js  | 11 ++++
 .../developmentBuiltinFallbacks/path.js       | 11 ++++
 .../developmentBuiltinFallbacks/process.js    | 11 ++++
 .../developmentBuiltinFallbacks/punycode.js   | 11 ++++
 .../querystring.js                            | 13 +++++
 .../developmentBuiltinFallbacks/stream.js     | 11 ++++
 .../string_decoder.js                         | 13 +++++
 .../config/developmentBuiltinFallbacks/sys.js | 11 ++++
 .../developmentBuiltinFallbacks/timers.js     | 11 ++++
 .../config/developmentBuiltinFallbacks/tty.js | 11 ++++
 .../config/developmentBuiltinFallbacks/url.js | 11 ++++
 .../developmentBuiltinFallbacks/util.js       | 11 ++++
 .../config/developmentBuiltinFallbacks/vm.js  | 11 ++++
 .../developmentBuiltinFallbacks/zlib.js       | 11 ++++
 .../config/developmentNodeBuiltinFallback.js  | 50 -------------------
 .../config/nodeBuiltinFallbacks.js            |  2 +-
 .../react-scripts/config/webpack.config.js    |  9 ++++
 32 files changed, 381 insertions(+), 51 deletions(-)
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/_stream_duplex.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/_stream_passthrough.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/_stream_readable.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/_stream_transform.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/_stream_writable.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/assert.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/buffer.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/console.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/constants.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/createDevelopmentNodeBuiltinFallback.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/crypto.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/domain.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/events.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/http.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/https.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/os.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/path.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/process.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/punycode.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/querystring.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/stream.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/string_decoder.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/sys.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/timers.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/tty.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/url.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/util.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/vm.js
 create mode 100644 packages/react-scripts/config/developmentBuiltinFallbacks/zlib.js
 delete mode 100644 packages/react-scripts/config/developmentNodeBuiltinFallback.js

diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_duplex.js b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_duplex.js
new file mode 100644
index 00000000000..59dbe227baa
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_duplex.js
@@ -0,0 +1,13 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')(
+  'stream_duplex'
+);
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_passthrough.js b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_passthrough.js
new file mode 100644
index 00000000000..af0986377ed
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_passthrough.js
@@ -0,0 +1,13 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')(
+  'stream_passthrough'
+);
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_readable.js b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_readable.js
new file mode 100644
index 00000000000..083fac1e9f5
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_readable.js
@@ -0,0 +1,13 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')(
+  'stream_readable'
+);
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_transform.js b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_transform.js
new file mode 100644
index 00000000000..f0d8ede6b7b
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_transform.js
@@ -0,0 +1,13 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')(
+  'stream_transform'
+);
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_writable.js b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_writable.js
new file mode 100644
index 00000000000..d278e44f6d3
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/_stream_writable.js
@@ -0,0 +1,13 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')(
+  'stream_writeable'
+);
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/assert.js b/packages/react-scripts/config/developmentBuiltinFallbacks/assert.js
new file mode 100644
index 00000000000..0fbb6828160
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/assert.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('assert');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/buffer.js b/packages/react-scripts/config/developmentBuiltinFallbacks/buffer.js
new file mode 100644
index 00000000000..05a1151d2c7
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/buffer.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('buffer');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/console.js b/packages/react-scripts/config/developmentBuiltinFallbacks/console.js
new file mode 100644
index 00000000000..25331146438
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/console.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('console');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/constants.js b/packages/react-scripts/config/developmentBuiltinFallbacks/constants.js
new file mode 100644
index 00000000000..7847a0f9b36
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/constants.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('constants');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/createDevelopmentNodeBuiltinFallback.js b/packages/react-scripts/config/developmentBuiltinFallbacks/createDevelopmentNodeBuiltinFallback.js
new file mode 100644
index 00000000000..e36b9ca5dc2
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/createDevelopmentNodeBuiltinFallback.js
@@ -0,0 +1,49 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = function createDevelopmentNodeBuiltinFallback(nodeModuleName) {
+  const linkToDocumentation =
+    'https://create-react-app.dev/docs/nodejs-builtin-fallbacks';
+  const defaultMessage = `(dev) Error: Module "${nodeModuleName}" not found, ref: ${linkToDocumentation}`;
+
+  const defaultExport = {
+    $$typeof: defaultMessage,
+    __esModule: {
+      value: true,
+    },
+  };
+  try {
+    // Modern browsers with Proxy support - Shows warning in $$type, default and specific imports
+    return new Proxy(Object.assign({}, defaultExport), {
+      get: function developmentFallback(target, prop) {
+        if (['$$typeof', '__esModule'].includes(prop)) {
+          return target;
+        }
+
+        console.error(
+          `(dev) Error: Module "${nodeModuleName}" not found, cannot access property "${prop}", please read ${linkToDocumentation}`
+        );
+        throw TypeError();
+      },
+    });
+  } catch (error) {
+    // Legacy browsers without Proxy support - Limited to showing warnings in $$type and default
+    const result = Object.assign({}, defaultExport);
+
+    Object.defineProperty(result, 'default', {
+      get: function () {
+        console.error(defaultMessage);
+        throw new TypeError();
+      },
+    });
+
+    return result;
+  }
+};
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/crypto.js b/packages/react-scripts/config/developmentBuiltinFallbacks/crypto.js
new file mode 100644
index 00000000000..df110d19d5c
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/crypto.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('crypto');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/domain.js b/packages/react-scripts/config/developmentBuiltinFallbacks/domain.js
new file mode 100644
index 00000000000..5200005b568
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/domain.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('domain');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/events.js b/packages/react-scripts/config/developmentBuiltinFallbacks/events.js
new file mode 100644
index 00000000000..0a392705f30
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/events.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('events');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/http.js b/packages/react-scripts/config/developmentBuiltinFallbacks/http.js
new file mode 100644
index 00000000000..63c1b7f2fe0
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/http.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('http');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/https.js b/packages/react-scripts/config/developmentBuiltinFallbacks/https.js
new file mode 100644
index 00000000000..e6f9cc2cd5e
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/https.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('https');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/os.js b/packages/react-scripts/config/developmentBuiltinFallbacks/os.js
new file mode 100644
index 00000000000..8a3457871d0
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/os.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('os');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/path.js b/packages/react-scripts/config/developmentBuiltinFallbacks/path.js
new file mode 100644
index 00000000000..9ddb53acf5e
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/path.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('path');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/process.js b/packages/react-scripts/config/developmentBuiltinFallbacks/process.js
new file mode 100644
index 00000000000..f61ec89ed16
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/process.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('process');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/punycode.js b/packages/react-scripts/config/developmentBuiltinFallbacks/punycode.js
new file mode 100644
index 00000000000..52b846e2062
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/punycode.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('punycode');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/querystring.js b/packages/react-scripts/config/developmentBuiltinFallbacks/querystring.js
new file mode 100644
index 00000000000..a3770ca0b76
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/querystring.js
@@ -0,0 +1,13 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')(
+  'querystring'
+);
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/stream.js b/packages/react-scripts/config/developmentBuiltinFallbacks/stream.js
new file mode 100644
index 00000000000..038c79cfeb9
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/stream.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('stream');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/string_decoder.js b/packages/react-scripts/config/developmentBuiltinFallbacks/string_decoder.js
new file mode 100644
index 00000000000..0d37cbd9bb8
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/string_decoder.js
@@ -0,0 +1,13 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')(
+  'string_decoder'
+);
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/sys.js b/packages/react-scripts/config/developmentBuiltinFallbacks/sys.js
new file mode 100644
index 00000000000..fdd68594204
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/sys.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('sys');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/timers.js b/packages/react-scripts/config/developmentBuiltinFallbacks/timers.js
new file mode 100644
index 00000000000..544c121e43b
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/timers.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('timers');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/tty.js b/packages/react-scripts/config/developmentBuiltinFallbacks/tty.js
new file mode 100644
index 00000000000..fa9fc13f58e
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/tty.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('tty');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/url.js b/packages/react-scripts/config/developmentBuiltinFallbacks/url.js
new file mode 100644
index 00000000000..0ffbc8f25d6
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/url.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('url');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/util.js b/packages/react-scripts/config/developmentBuiltinFallbacks/util.js
new file mode 100644
index 00000000000..d4014314ac2
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/util.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('util');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/vm.js b/packages/react-scripts/config/developmentBuiltinFallbacks/vm.js
new file mode 100644
index 00000000000..6690e13c5ea
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/vm.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('vm');
diff --git a/packages/react-scripts/config/developmentBuiltinFallbacks/zlib.js b/packages/react-scripts/config/developmentBuiltinFallbacks/zlib.js
new file mode 100644
index 00000000000..617a5f4c3c3
--- /dev/null
+++ b/packages/react-scripts/config/developmentBuiltinFallbacks/zlib.js
@@ -0,0 +1,11 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+module.exports = require('./createDevelopmentNodeBuiltinFallback')('zlib');
diff --git a/packages/react-scripts/config/developmentNodeBuiltinFallback.js b/packages/react-scripts/config/developmentNodeBuiltinFallback.js
deleted file mode 100644
index f704316b438..00000000000
--- a/packages/react-scripts/config/developmentNodeBuiltinFallback.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// @remove-on-eject-end
-'use strict';
-
-const linkToDocumentation =
-  'https://create-react-app.dev/docs/nodejs-builtin-fallbacks';
-const defaultMessage = `(development mode) Error: Trying to access fallback module for NodeJS builtin module please read ${linkToDocumentation}`;
-
-const defaultExport = {
-  $$typeof: defaultMessage,
-  __esModule: {
-    value: true,
-  },
-};
-try {
-  // Modern browsers with Proxy support - Shows warning in $$type, default and specific imports
-  module.exports = new Proxy(
-    { ...defaultExport },
-    {
-      get: function developmentFallback(target, prop) {
-        if (['$$typeof', '__esModule'].includes(prop)) {
-          return target;
-        }
-
-        console.error(
-          `(development mode) Error: Trying to access property "${prop}" of fallback module for NodeJS builtin module please read ${linkToDocumentation}`
-        );
-        throw TypeError();
-      },
-    }
-  );
-} catch (error) {
-  // Legacy browsers without Proxy support - Limited to showing warnings in $$type and default
-  module.exports = {
-    ...defaultExport,
-  };
-
-  Object.defineProperty(module.exports, 'default', {
-    get: function () {
-      console.error(defaultMessage);
-      throw new TypeError();
-    },
-  });
-}
diff --git a/packages/react-scripts/config/nodeBuiltinFallbacks.js b/packages/react-scripts/config/nodeBuiltinFallbacks.js
index 606d7fd547f..041a6838abc 100644
--- a/packages/react-scripts/config/nodeBuiltinFallbacks.js
+++ b/packages/react-scripts/config/nodeBuiltinFallbacks.js
@@ -58,7 +58,7 @@ function createNodeBuiltinFallbacks(webpackEnv) {
     fallbacks[nodeModule] =
       isEnvProduction || disableDevelopmentFallback
         ? false // Default don't include polyfills per default in production
-        : require.resolve('./developmentNodeBuiltinFallback'); // Default polyfill in development for better DX
+        : require.resolve(`./developmentBuiltinFallbacks/${nodeModule}`); // Default polyfill in development for better DX
 
     if (appPackageJson.dependencies[fallbackModuleName]) {
       // Check app package.json for fallback dependency making sure we use project installed fallbacks
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 2b33a8ab807..9412faa831c 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -37,7 +37,9 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
+// @remove-on-eject-begin
 const nodeBuiltinFallbacks = require('./nodeBuiltinFallbacks');
+// @remove-on-eject-end
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -115,7 +117,9 @@ module.exports = function (webpackEnv) {
 
   const shouldUseReactRefresh = env.raw.FAST_REFRESH;
 
+  // @remove-on-eject-begin
   const nodeBuiltin = nodeBuiltinFallbacks(webpackEnv);
+  // @remove-on-eject-end
 
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
@@ -304,10 +308,13 @@ module.exports = function (webpackEnv) {
       ],
     },
     resolve: {
+      // @remove-on-eject-begin
       // This adds support for node builins
       fallback: {
         ...nodeBuiltin.fallbacks,
       },
+      // @remove-on-eject-end
+
       // This allows you to set a fallback for where webpack should look for modules.
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
@@ -348,7 +355,9 @@ module.exports = function (webpackEnv) {
           babelRuntimeEntry,
           babelRuntimeEntryHelpers,
           babelRuntimeRegenerator,
+          // @remove-on-eject-begin
           ...nodeBuiltin.fallbackEntries,
+          // @remove-on-eject-end
         ]),
       ],
     },

From 17fa0228657bf5ed13ec6c57ce365ba8fa56bf8b Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Fri, 17 Dec 2021 18:56:10 +0100
Subject: [PATCH 7/8] Add documentation of the escape hatch for node builtin
 modules

---
 docusaurus/docs/nodejs-builtin-fallbacks.md | 71 +++++++++++++++------
 1 file changed, 50 insertions(+), 21 deletions(-)

diff --git a/docusaurus/docs/nodejs-builtin-fallbacks.md b/docusaurus/docs/nodejs-builtin-fallbacks.md
index a849d165946..28de3958d63 100644
--- a/docusaurus/docs/nodejs-builtin-fallbacks.md
+++ b/docusaurus/docs/nodejs-builtin-fallbacks.md
@@ -3,35 +3,64 @@ id: nodejs-builtin-fallbacks
 title: NodeJS builtin fallbacks
 ---
 
-NodeJS builtin fallbacks enable you to import NodeJS builtin modules meant for Node and fallback to browser specific modules.
+NodeJS builtin fallbacks enable you to import NodeJS builtin modules meant for Node and fallback to browser specific modules in your web application.
 
-If your application dependens on a package using NodeJS builtin modules it will require a fallback to run in the browser.
+Per default Create React App set fallbacks to empty modules in production build and development fallbacks in development mode.
 
-Example of error message:
+In development mode you might get error messages in your browser console similar to:
 
 ```
-> yarn build
-Creating an optimized production build...
-Failed to compile.
-
-Module not found: Error: Can't resolve 'url' in '...'
-BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
-This is no longer the case. Verify if you need this module and configure a polyfill for it.
-
-If you want to include a polyfill, you need to:
-	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
-	- install 'url'
-If you don't want to include a polyfill, you can use an empty module like this:
-	resolve.fallback: { "url": false }
->
+(dev) Error: Module "path" not found, cannot access property "join", please read https://create-react-app.dev/docs/nodejs-builtin-fallbacks
 ```
 
-To resolve this error you would need to install the package `url` in your project.
+_(It's possible to disable these warnings in development using the environment variable: `DISABLE_MISSING_NODEJS_BUILTIN_MODULE_FALLBACK_WARNING=true`)_
+
+**IMPORTANT:** Before fixing this dependency, please make sure to only use Npm packages meant for the browser and not for Node / backend.
+
+It takes abit of work but visit the project documentation, README.md and if on GitHub etc. look open and closed issues in the project e.g. search "browser" to see if maintainers close issues for browser support.
+
+Implications of loading packages not build for the browser can vary from security, bundle size etc. - There might be better alternatives.
+
+**Escape hatch**
+
+To fix the issue you will need to add the browser fallback - the example above complains about missing `path` module.
 
 ```bash
-npm install url
+npm install path-browserif
 # or..
-yarn add url
+yarn add path-browserif
 ```
 
-_(We don't support to not include the polyfill if needed)_
+Create React App will recognize the fallback and use that instead of an empty module.
+_(Find the fallback package in the table bellow)_
+
+| NodeJS builtin module | Browser version            |
+| :-------------------- | :------------------------- |
+| assert                | assert                     |
+| buffer                | buffer                     |
+| console               | console-browserif          |
+| constants             | constants-browserif        |
+| crypto                | crypto-browserif           |
+| domain                | domain-browse              |
+| events                | events                     |
+| http                  | stream-htt                 |
+| https                 | https-browserif            |
+| os                    | os-browserify/browse       |
+| path                  | path-browserif             |
+| punycode              | punycode                   |
+| process               | process/browse             |
+| querystring           | querystring-es             |
+| stream                | stream-browserif           |
+| stream_duplex         | readable-stream/duple      |
+| stream_passthrough    | readable-stream/passthroug |
+| stream_readable       | readable-stream/readabl    |
+| stream_transform      | readable-stream/transfor   |
+| stream_writable       | readable-stream/writabl    |
+| string_decoder        | string_decoder             |
+| sys                   | util                       |
+| timers                | timers-browserif           |
+| tty                   | tty-browserif              |
+| url                   | url                        |
+| util                  | util                       |
+| vm                    | vm-browserif               |
+| zlib                  | browserify-zlib            |

From 20dada7eebdcb060e24890bc6cc760e9efd657d0 Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Sun, 19 Dec 2021 07:40:19 +0100
Subject: [PATCH 8/8] Fix typo in comment

---
 packages/react-scripts/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 9412faa831c..6c25c5b1f5e 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -309,7 +309,7 @@ module.exports = function (webpackEnv) {
     },
     resolve: {
       // @remove-on-eject-begin
-      // This adds support for node builins
+      // This adds support for node builtins
       fallback: {
         ...nodeBuiltin.fallbacks,
       },