V5 add back support for node builtins #11764

raix · 2021-12-15T16:58:34Z

Fixed #11756 by adding option to install nodeJS builtin fallbacks

Document the escape hatch and why not to use it
Improve the error message from Webpack 5 - make it more developer friendly pointing to the documentation
Maybe add an extra check of the package main fields (e.g. if the package has "browser" main field then advice to report an issue - it should not rely on nodejs built in modules)

raix · 2021-12-15T23:00:22Z

Investigating if webpack config of mainfields is the root cause of the issue https://webpack.js.org/configuration/resolve/#resolvemainfields

Rubenvet · 2021-12-17T00:46:40Z

Do you mind explaining how to solve the issue step by step for a beginner. I keep getting the same issue, but I am still very new to all of this. Thank you!

raix · 2021-12-17T04:49:08Z

Opened an issue in Webpack: webpack/webpack#15007

If a package like "handlebars" is imported, webpack fails to resolve import using the existing "browser" main field and fallsback to using the "main" field resolving the node js version of the package.

This ends up asking for node js builtin packages - if we add support for builtin packages we could risk adding backend code in the browser.

We might need to add documentation regarding this and some guidance for developers not experienced enough to realize the difference between npm packages
(developers have to read the documentation of the library they are using and make sure it's meant for the browser and not the backend... + Maintainers of polymorphic packages need to create browser and nodejs specific builds of their packages - we need to help fix this..)

raix · 2021-12-17T04:51:23Z

@Rubenvet please use the issue tracker or stack overflow - this pull-request is for discussing a solution

raix · 2021-12-17T04:53:38Z

I see the intent of the Webpack resolve.fallback option a tool for package maintainers - not consumers of packages

raix · 2021-12-17T06:13:11Z

Suggestion for documentation / migration: #11756 (comment)

…better DX

raix · 2021-12-17T13:41:27Z

This PR set nodejs builin fallbacks to false in production and a debug fallback in development with error message and link to documentation if any code is using the module runtime:

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

jodaka · 2021-12-20T12:05:57Z

I tried upgrading few of my projects to 5.0.0 but they all stopped working cause process.env. is no longer available. And I couldn't find anything about it in documentation. Not sure if it's related to this PR

merceyz · 2021-12-20T18:29:11Z

packages/react-scripts/config/nodeBuiltinFallbacks.js

+      // Check app package.json for fallback dependency making sure we use project installed fallbacks
+      try {
+        // Use installed fallback
+        fallbacks[nodeModule] = require.resolve(fallbackModule);


If you want to resolve it from the app you need to set the paths to point to it, otherwise you're resolving it from react-scripts itself which means you need to add them all as peer dependencies

no23reason · 2021-12-21T15:24:16Z

docusaurus/docs/nodejs-builtin-fallbacks.md

+| os                    | os-browserify/browse       |
+| path                  | path-browserif             |
+| punycode              | punycode                   |
+| process               | process/browse             |


Typo: should be process/browser (missing r at the end).

At least half the names in the 2nd column seem to be missing their last letter:

browserif should be browserify ? (multiple variants)

stream-htt should be stream-http ?

readable-stream/duple should be readable-stream/duplex ?
etc etc etc

We're looking at this at the moment, and just noticed this issue too. Thanks @no23reason and @PjotrB.

krisgerhard · 2022-01-06T10:31:09Z

Is fixing this issue still on track for the milestone 5.0.1?

- workaround cra@5 builtin module issue, temporarily use react-scripts@4 - workaround: facebook/create-react-app#11764

- workaround cra@5 builtin module issue, temporarily use react-scripts@4 - workaround: facebook/create-react-app#11764 - complete example code: https://docs.metamask.io/guide/ethereum-provider.html#using-the-provider

icecream17 · 2022-04-26T15:27:51Z

docusaurus/docs/nodejs-builtin-fallbacks.md

+
+NodeJS builtin fallbacks enable you to import NodeJS builtin modules meant for Node and fallback to browser specific modules in your web application.
+
+Per default Create React App set fallbacks to empty modules in production build and development fallbacks in development mode.


Suggested change

Per default Create React App set fallbacks to empty modules in production build and development fallbacks in development mode.

This restores the previous behavior in Webpack < 5, where Create React App used to include these builtin fallbacks.

I think this is how the sentence was intended, connecting to the previous sentence. I changed the inclusion to past tense.

evandev01 · 2022-04-27T21:21:39Z

Webpack v5 has wrecked my React applications, and I pretty much can't code. This is a disaster. I have tried adding fallbacks, installing the million dependencies, downgrading react-scripts to 4.0.3. This is an EMERGENCY and needs to be FIXED NOW as literally 0 solutions work. Speaking of work my BUSINESS IS SUFFERING. Again this needs to be fixed IMMEDIATELY.

benjsmi · 2022-05-17T15:46:27Z

There are now approximately 7-8 vulnerabilities in the NVD in npms that are depended upon by React 4.x -- would love to move to React 5.x, but can't because of the problem this PR fixes.

ryan-henness-trimble · 2022-05-17T21:33:54Z

not sure if it takes care of all use cases covered by this PR, but as an alternative, a relatively small craco config can be used to add the "node-polyfill-webpack-plugin" to the webpack config

craco.config.js
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = {
  webpack: {
    plugins: [
      new NodePolyfillPlugin({
        excludeAliases: ['console'],
      }),
    ],
  },
}

Careful, I think craco is only using react-scripts v4

cmdcolin · 2022-05-17T22:02:40Z

@ryan-henness-trimble that is a valid concern but for this basic usage, craco has worked fine for me :)

random add-on: I know also there are other ways to do it e.g. webpack recommends using "fallback" config field which might look like this, as an alternative to node-polyfill-plugin

// possibly alt craco.config.js method, untested though
 webpack: {
  resolve: {
    fallback: {
      buffer: require.resolve('buffer/'),
      url: require.resolve('url/'),
    },
  },
 }
// note: separately use `yarn add buffer` and `yarn add url` to allow the above to work

xref https://viglucci.io/how-to-polyfill-buffer-with-webpack-5

pavlovp · 2022-05-24T14:54:03Z

In my opinion, polyfills are bad engineering design.
If the webapp imports libraries that use node-specific apis - should it compile with success?
Webpack allowed that for years - and this is why we got that mess.

ljharb · 2022-05-24T14:56:58Z

@pavlovp yes, it should; but it doesn’t matter if it should or not - it has for a decade, and it shouldn’t be changed now.

jordanwilking · 2022-05-24T15:01:36Z

@cmdcolin Thanks for the craco config!

For posterity, I had to add a plugins property for buffer (as well as npm install the individual polyfills):

webpack: {
    configure: {
        resolve: {
            /**
             * create-react-app 5 uses webpack 5, which no longer ships with node polyfills.
             * We use these polyfills throughout the project either directly or via a dependency.
             * If/when CRA allows us to add these back in (https://github.com/facebook/create-react-app/pull/11764),
             * that would be preferrable to using craco.
             * Craco's team is looking to give it up (https://github.com/gsoft-inc/craco/issues/415).
             * Possible alternatives: react-app-rewired or ejecting from CRA
             */
            fallback: {
                assert: require.resolve("assert"),
                buffer: require.resolve("buffer"),
                process: require.resolve("process/browser"),
                stream: require.resolve("stream-browserify"),
            },
        },
        plugins: [
            new webpack.ProvidePlugin({
                Buffer: ["buffer", "Buffer"],
            }),
        ],
    },
},

filoscoder · 2022-06-21T20:25:58Z

For now, we solved this with react-app-rewired override

const Webpack = require("webpack");

module.exports = function override(config) {
  // Required polyfill packages
  config.resolve.fallback = {
    ...config.resolve.fallback,
    console: require.resolve("console-browserify"),
    crypto: require.resolve("crypto-browserify"),
    path: require.resolve("path-browserify"),
    process: require.resolve("process/browser"),
    stream: require.resolve("stream-browserify"),
    util: require.resolve("util"),
  };
  // Required global polyfill
  config.plugins = [
    ...config.plugins,
    new Webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process/browser",
    }),
  ];

  return config;
};

tomtobac · 2022-07-07T11:43:07Z

Any update on this?

meatnordrink · 2022-07-14T16:39:11Z

For anyone searching for a solution to this in the meantime - here's a blog post (seems like from a company whose product was broken by this upgrade) outlining what seems to be the most common solution:

https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5

This is an insane for such a small issue but there is no alternative for the time being. See facebook/create-react-app#11756 and related PR facebook/create-react-app#11764.

raix · 2022-08-17T17:37:38Z

Would be great if anyone are up for taking over this pr, currently out of time 🙏

vjtyagi · 2022-09-14T12:37:44Z

This is broken since last year, It should be the highest priority issue on the backlog. Does nobody on the core team has any time for fixing this issue? which is spoiling the whole developer experience of using CRA

BearCooder · 2022-10-05T16:09:01Z

The problem we see here is an assumption if something is using npm so it is technically using node and that is should polyfill everything you can do in node. PLEASE NO. Just because everyone does it it does not mean its correct - a terrible reality in npm land..

Thank god Webpack dropped that!

Overall the distinction between frontend and backend packages in the node ecosystem is bad (I would even say its horrific). But that does not mean in any world we should polyfill fs, crypto or other into webapps. This is a terrible idea, even considering the idea of polyfilling node builtins, because e.g. you DO NOT call crypto on your client.

Its a historical problem that finally gets eradicated (slow but steady) - CRA used to include polyfills for node js stuff that shouldnt have been running in the browser including crypto. If you imported node crypto modules directly in your component that should not ever have because nodes crypto module IS NOT a browser module but what they did for us was to polyfill those things. Finally React realized that this is probably not a good idea and the team made the right decision with v5 to not longer do this because doing that is just bad.

The vast majority of the things in node were built to run on the server because node is serverside javascript.
It got bastardized into a package manager for client apps but that doesnt mean we should just treat them the same.
Node builtin modules are not in any way built for the browser.

There is actually a new W3C working group who argue about base set of javascript commands and functionality should exist on all platforms ( be it node, deno etc).

So PLEASE DO not reintroduce back support for node builtins!

Despite the title this video is a great must watch for everyone that demands this comes back to CRA!! Just watch the first 20 minutes..

ljharb · 2022-10-05T16:26:44Z

@BearCooder while that's true that usage doesn't indicate correctness, this is actually the correct behavior. These are node modules, and a node module bundler should be providing these polyfills, or else it's broken.

Webpack is who made the decision, to be clear, not the CRA team - they either went along with it or failed to correct it when updating - and it's caused an inordinate amount of cost and pain for developers since. https://medium.com/sindre-sorhus/webpack-5-headache-b6ac24973bf1 covers it well.

WinterCG isn't relevant here except that it makes (according to your argument) is the opposite mistake - adding APIs designed exclusively for the browser to servers. If WinterCG makes sense, then polyfilling node core modules also makes sense - they're two sides of the same coin.

(Additionally, the npm ecosystem is the largest, and imo also the best, out of every language, but that's just an offtopic discussion)

jodaka · 2022-10-06T07:40:39Z

CRA docs says we can use process.env to get access to ENV variables. That was true for v4. Not anymore for v5.
Docs are misleading and should at least mention requirement to manually add polyfills in order to use ENV variables.

jdempcy · 2022-11-18T19:04:36Z

[x-post from GitHub issue here]

For those just finding this, as of November 18 2022, here is the solution that worked for me:

Use react-app-rewired
I know some people are asking for solutions that do not use react-app-rewired, but unless you eject the app, this is the only way I've found to solve these issues. There may be another solution but this is what worked for me.

npm i react-app-rewired

Create config-overrides.js in the root with the following:

const webpack = require('webpack');

module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

Change your build scripts in package.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

Replace dependencies with similar packages

I had to do this twice, once for path and once for fs.

I ran:

npm i path@npm:path-browserify
npm i fs@npm:file-system

That fixed the build errors I was getting! I can now npm run build or npm start no problem :)

BearCooder · 2023-02-05T01:03:40Z

Guys better prepare to switch over to something else than Create React App.
reactjs/react.dev#5487

Curtis-D · 2023-02-05T03:09:09Z

Guys better prepare to switch over to something else than Create React App. reactjs/reactjs.org#5487

Vite seems like the obvious choice

Morten N.O. Henriksen added 2 commits December 15, 2021 17:56

Add support for nodejs builtins

166d872

Update package-lock

5e83115

raix requested review from iansu and mrmckeb as code owners December 15, 2021 16:58

raix mentioned this pull request Dec 15, 2021

v5 used to include polyfills for node.js core modules by default #11756

Open

facebook-github-bot added the CLA Signed label Dec 15, 2021

iansu added this to the 5.0.1 milestone Dec 15, 2021

raix marked this pull request as draft December 15, 2021 22:59

Morten N.O. Henriksen added 2 commits December 17, 2021 13:56

Make default behavior to provide empty fallback modules

944a50a

Add Proxy fallback module for nodejs builtin in development only for …

cb4a8a3

…better DX

Morten N.O. Henriksen added 3 commits December 17, 2021 17:28

Add legacy browser support and refactor + QA

e6b5b3a

Add development fallbacks per module to improve DX

46b4e0c

Add documentation of the escape hatch for node builtin modules

17fa022

raix marked this pull request as ready for review December 17, 2021 17:56

jessethach reviewed Dec 17, 2021

View reviewed changes

packages/react-scripts/config/webpack.config.js Outdated Show resolved Hide resolved

Fix typo in comment

20dada7

merceyz reviewed Dec 20, 2021

View reviewed changes

no23reason reviewed Dec 21, 2021

View reviewed changes

antgamdia mentioned this pull request Jan 3, 2022

Update to CRA react-scripts 5.x.x vmware-tanzu/kubeapps#4018

Closed

liuderchi added a commit to liuderchi/EthereumCasts that referenced this pull request Jan 8, 2022

chore: L101-L103, setup web3 lib by wrapping metamask provider

b7e0160

- workaround cra@5 builtin module issue, temporarily use react-scripts@4 - workaround: facebook/create-react-app#11764

This was referenced Apr 26, 2022

react-script 5.0.0 issue for use-contractkit celo-org/react-celo#152

Closed

Add local dev steps to the README celo-org/react-celo#158

Closed

icecream17 reviewed Apr 26, 2022

View reviewed changes

raphael10-collab mentioned this pull request Apr 28, 2022

url.pathToFileURL is not a function : how to convert a file path to an URL in node.js? nodejs/help#3846

Closed

benschac mentioned this pull request Apr 30, 2022

Add rewired to project jbx-protocol/juice-interface#868

Merged

2 tasks

adamazad mentioned this pull request May 5, 2022

fix: polyfill node core modules in Webpack 5 nimi-app/app#14

Merged

This was referenced May 11, 2022

Bump react scripts to v5 Sage-Bionetworks/portals#753

Closed

Bump react-scripts to v5 Sage-Bionetworks/portals#760

Merged

lutangar mentioned this pull request Aug 17, 2022

fix: fix production build issue with cra 5 datatlas-erasme/front#123

Merged

raix closed this by deleting the head repository Apr 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

V5 add back support for node builtins #11764

V5 add back support for node builtins #11764

raix commented Dec 15, 2021 •

edited

Loading

raix commented Dec 15, 2021

Rubenvet commented Dec 17, 2021

raix commented Dec 17, 2021

raix commented Dec 17, 2021

raix commented Dec 17, 2021

raix commented Dec 17, 2021

raix commented Dec 17, 2021 •

edited

Loading

jodaka commented Dec 20, 2021

merceyz Dec 20, 2021 •

edited

Loading

no23reason Dec 21, 2021

PjotrB Dec 22, 2021

mrmckeb May 18, 2022

krisgerhard commented Jan 6, 2022

icecream17 Apr 26, 2022

evandev01 commented Apr 27, 2022

benjsmi commented May 17, 2022

ryan-henness-trimble commented May 17, 2022 •

edited

Loading

cmdcolin commented May 17, 2022 •

edited

Loading

pavlovp commented May 24, 2022 •

edited

Loading

ljharb commented May 24, 2022

jordanwilking commented May 24, 2022 •

edited

Loading

filoscoder commented Jun 21, 2022 •

edited

Loading

tomtobac commented Jul 7, 2022

meatnordrink commented Jul 14, 2022

raix commented Aug 17, 2022

vjtyagi commented Sep 14, 2022

BearCooder commented Oct 5, 2022

ljharb commented Oct 5, 2022

jodaka commented Oct 6, 2022 •

edited

Loading

jdempcy commented Nov 18, 2022

BearCooder commented Feb 5, 2023

Curtis-D commented Feb 5, 2023


		NodeJS builtin fallbacks enable you to import NodeJS builtin modules meant for Node and fallback to browser specific modules in your web application.

		Per default Create React App set fallbacks to empty modules in production build and development fallbacks in development mode.

	Per default Create React App set fallbacks to empty modules in production build and development fallbacks in development mode.
	This restores the previous behavior in Webpack < 5, where Create React App used to include these builtin fallbacks.

V5 add back support for node builtins #11764

V5 add back support for node builtins #11764

Conversation

raix commented Dec 15, 2021 • edited Loading

raix commented Dec 15, 2021

Rubenvet commented Dec 17, 2021

raix commented Dec 17, 2021

raix commented Dec 17, 2021

raix commented Dec 17, 2021

raix commented Dec 17, 2021

raix commented Dec 17, 2021 • edited Loading

jodaka commented Dec 20, 2021

merceyz Dec 20, 2021 • edited Loading

Choose a reason for hiding this comment

no23reason Dec 21, 2021

Choose a reason for hiding this comment

PjotrB Dec 22, 2021

Choose a reason for hiding this comment

mrmckeb May 18, 2022

Choose a reason for hiding this comment

krisgerhard commented Jan 6, 2022

icecream17 Apr 26, 2022

Choose a reason for hiding this comment

evandev01 commented Apr 27, 2022

benjsmi commented May 17, 2022

ryan-henness-trimble commented May 17, 2022 • edited Loading

cmdcolin commented May 17, 2022 • edited Loading

pavlovp commented May 24, 2022 • edited Loading

ljharb commented May 24, 2022

jordanwilking commented May 24, 2022 • edited Loading

filoscoder commented Jun 21, 2022 • edited Loading

tomtobac commented Jul 7, 2022

meatnordrink commented Jul 14, 2022

raix commented Aug 17, 2022

vjtyagi commented Sep 14, 2022

BearCooder commented Oct 5, 2022

ljharb commented Oct 5, 2022

jodaka commented Oct 6, 2022 • edited Loading

jdempcy commented Nov 18, 2022

BearCooder commented Feb 5, 2023

Curtis-D commented Feb 5, 2023

raix commented Dec 15, 2021 •

edited

Loading

raix commented Dec 17, 2021 •

edited

Loading

merceyz Dec 20, 2021 •

edited

Loading

ryan-henness-trimble commented May 17, 2022 •

edited

Loading

cmdcolin commented May 17, 2022 •

edited

Loading

pavlovp commented May 24, 2022 •

edited

Loading

jordanwilking commented May 24, 2022 •

edited

Loading

filoscoder commented Jun 21, 2022 •

edited

Loading

jodaka commented Oct 6, 2022 •

edited

Loading