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

facebook / create-react-app

Set up a modern web app by running one command.

https://create-react-app.dev

MIT License

102.61k stars 26.79k forks source link

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

Open damozhang opened 2 years ago

damozhang commented 2 years ago

Describe the bug

Compiled with problems

Did you try recovering your dependencies?

yarn --version
1.22.15

Which terms did you search for in User Guide?

react-scripts 5 webpack Module not found: Error: Can't resolve 'fs'

Environment

npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/xxx/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 16.13.0 - /usr/local/Cellar/node@16/16.13.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/Cellar/node@16/16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Edge: Not Found
    Firefox: 94.0.1
    Safari: 15.1
  npmPackages:
    react:  17.0.2 
    react-dom:  17.0.2 
    react-scripts:  5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

In a project with react-scripts v5.0.0

yarn add -D dotenv
yarn start

Expected behavior

Actual behavior

ERROR in ../../node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in '../node_modules/dotenv/lib'
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

ERROR in ../../node_modules/dotenv/lib/main.js 26:13-28
Module not found: Error: Can't resolve 'path' in '../node_modules/dotenv/lib'

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: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

ERROR in ../../node_modules/dotenv/lib/main.js 28:11-24
Module not found: Error: Can't resolve 'os' in '../node_modules/dotenv/lib'

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: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

Some useful comments:

dependency aliases

react-app-rewired config

@craco/craco config

hacking react-scripts with patch-package

arjshiv commented 2 years ago

I have the same issue as well

FeiFanLiang commented 2 years ago

me too

raix commented 2 years ago

Webpack 5 no longer shims node builtin packages. Its a breaking change.

zfarhad commented 2 years ago

I try to upgrade from v4.0.3 to 5.0.0 and It raise up the same error

Compiled with problems:

ERROR in ./src/App.js 1:40-111

Module not found: Error: You attempted to import /home/xxx/web/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

AdnanDervisevic commented 2 years ago

Webpack 5 no longer shims node builtin packages. Its a breaking change.

Are we meant to eject for every app that relies on node builtin packages? Won't that be most production apps, since you will invariably import a node module that relies on this functionality

raix commented 2 years ago

My personal view: I personally consider it bad practice to include code in the front-end that was ment for back-end usage. From my experience: I've seen developers of any experienced try adding back-end npm packages on the front-end.

In Npm there is no clear difference to help out developers, it's "Node Packages" not "Browser Packages"

Package maintainers should ideally build node or browser specific bundles.

Again this is my personal view I support the move in Webpack, I'll of course bring it up in the maintainer group.

(Also see the release notes regarding webpack 5 - there's a note regarding this breaking change for further details)

For now it would be helpful to collect examples of front-end packages suffering from this issue. (The examples would help us reevaluate the decision)

sean-daley commented 2 years ago

Our two main usages are:

zlib
crypto

Our back-end compresses some of its data to optimize storage as well as network transfer. Our UI then uses zlib to uncompress it. Our UI can also login using OAuth and it uses the crypto randomBytes and createHash methods to generate data for that authorization

dylantf commented 2 years ago

Webpack has some output about providing a fallback resolution, what's the correct way to supply that since we don't have access to the actual webpack config?

jrr commented 2 years ago

To toss in another example, the v5 upgrade showed me that the libraries for AWS Cognito use url:

> yarn build
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'url' in '/path/to/app/.yarn/cache/@aws-amplify-core-npm-4.3.10-e9277c22ab-77b7fe62d8.zip/node_modules/@aws-amplify/core/lib-esm'
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 }
>

If you were a direct user of webpack v4, upgrading to v5, you have a few options: 1) stay on v4 2) remove usage of polyfilled modules 3) add polyfills

If I were in this situation, I'd be taking option 3. But as I understand it, that's not available today with non-ejected CRA.

It'd be nice if Webpack 5 had a single switch to flip, to restore v4's polyfill behavior. Then CRA could expose just that one switch. But there isn't: Webpack's migration guidance is to manually add polyfills to your webpack config.

https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed

Here are the polyfills that were formerly provided by webpack (note that the project is deprecated): https://github.com/webpack/node-libs-browser

..so what should CRA do?

raix commented 2 years ago

I've added a pr to gather feedback #11764

BiancaArtola commented 2 years ago

Same issue here. is there some documentation that we can follow for doing this migration?

LukeNotable commented 2 years ago

I'm not sure it's entirely a polyfill issue. I'm getting the Can't resolve 'fs' due to Handlebars, which (IIRC) should have been prevented by its browser setting in package.json.

raix commented 2 years ago

@LukeNotable thanks, interesting finding - I'll convert #11764 to a draft for now - would be great if it's an issue in the webpack config not resolving main fields correctly ref config: https://webpack.js.org/configuration/resolve/#resolvemainfields - will try to replicate

jasonleehodges commented 2 years ago

@zfarhad I had the same issue. Found out it was because I had Storybook as a dependency and it was using Webpack 4. Upgrading Storybook to use their new alpha version that supports Webpack 5 fixed me. So I would say, make sure none of your dependencies are using a conflicting version of webpack.

raix commented 2 years ago

@LukeNotable when importing 'handlebars/runtime' webpack seem to resolve correctly but if importing 'handlebars' it resolves to 'lib/index.js'

''' "browser": { ".": "./dist/cjs/handlebars.js", "./runtime": "./dist/cjs/handlebars.runtime.js" }, ''' I'll take a second look tomorrow, could be a config issue in CRA

German919 commented 2 years ago

ERROR in Plugin "react" was conflicted between "package.json » eslint-config-react-app. Estoy teniedo este error y no encuentro como solucionarlo..

jordanwilking commented 2 years ago

Fwiw, seeing this for a package trying to use assert and stream-browserify.

raix commented 2 years ago

Webpack 5 and CRA v5 don't add fallbacks for nodejs modules any more, it's a breaking change - dotenv should not be added in the browser code related issues closed in dotenv repo

Migration steps from v4 to v5:

A: Go to the Npm or Github readme for the package you are trying to use and see if the package is meant to run in the browser

If no - Then remove the package and find an alternative package better suited

B: Search in the package Github issues for "browser" and include closed issues, please. Example for DotEnv repo

If the maintainers multiple times state that the package is NOT meant for usage in the front-end and close the issues - Then remove the package and find an alternative package better suited

C: If the package should support the browser - then open an issue here in the CRA repo and we'll look into it - here to help!

An example: @LukeNotable raised an issue - we've confirmed that as an issue, debugged and opened an issue in the Webpack repository. Please note a very important detail regarding the handlebars package:

It provides a main field "browser" and bundle files specific to the browser
import "handlebars/runtime" resolves in the browser code
import "handlebars" resolves NodeJS version... Adding fallbacks for nodejs builtins would hide this issue

We have opened an issue in Webpack https://github.com/webpack/webpack/issues/15007

Sorry for the breaking change, but we are trying to keep you safe - we are considering better error message / documentation etc.

Kind regards Morten

lanwin commented 2 years ago

Uh my guess is that this means a lot people can not upgrade to v5 for a long time. In example our own deps report 50 errors cause nodes assert ist used in various deps.

dylantf commented 2 years ago

"Then remove the package and find an alternative package better suited" is a great strategy when you have an unlimited budget, but in many cases these packages work just fine in the browser with a polyfill, and sometimes packages in the JS ecosystem go unmaintained and there aren't any good alternatives. If Webpack 5 has an option to include the polyfills, but CRA does not, are we just expected to immediately eject upon upgrading to edit the webpack config, or just stay on CRA 4?

raix commented 2 years ago

We need to make sure that we are fixing the root cause and not the symptom - like with the handlebars example above e.g. There might be an issue in Webpack https://github.com/webpack/webpack/issues/15007 - let's evaluate if that fixes most of the errors.

To repeat https://github.com/facebook/create-react-app/issues/11756#issuecomment-994982058 we a considering adding an escape hatch and document why not to use it #11764

Again - if you are using packages not meant for the browser - and the maintainers of those packages keep closing issues for browser support and state that the package is not meant for the browser, then it's likely a good idea to find another package that supports the browser.

For more details on what nodejs builtin modules are see the nodejs api docs

Loque18 commented 2 years ago

same issue here with web3 js :/

raix commented 2 years ago

I've added a pull-request with a suggestion for an "escape hatch" - still waiting for the webpack team to confirm/deny the handlebars issue - let me know what you think https://github.com/facebook/create-react-app/pull/11764

fanmingfei commented 2 years ago

Same issue here with PixiJS v4

ratracegrad commented 2 years ago

npx create-react-app myApp cd myApp npm install web3 open App.js and add line import Web3 from 'web3' and you get errors related to the missing polyfills. Any suggestion on a workaround?

kayrules commented 2 years ago

I'm having similar issue earlier with CRA & web3. I fixed it by changing react-scriptsfrom 5.0.0 to version 4.0.3

geektechniquestudios commented 2 years ago

Same issue here with ethers js.

Module not found: Error: Can't resolve 'fs' in "node-env/file/path" Module not found: Error: Can't resolve 'path' in "node-env/file/path" Module not found: Error: Can't resolve 'os' in "node-env/file/path

Forced to use old version of react scripts, which in turn forces me to use an old version of tailwind :(

Everen-John commented 2 years ago

@kayrules 's solution works fine. the web3 package is currently unusable without downgrading react-scripts

fernandocamargo commented 2 years ago

I temporarily dealt with this by adding aliases to my dependencies. How bad is this solution?

Example:

"buffer": "^6.0.3",
"crypto": "npm:crypto-browserify",
"stream": "npm:stream-browserify",

steveilyo commented 2 years ago

I solved this issue by adding the fallback to my webpack.config.js file;

module.exports = {
    resolve: {
        fallback: {
            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'),
            stream: require.resolve('stream-browserify'),
        },
    },
};

using;

"dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },

but also need but got compilation errors on the build process:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

this was resolved by adding to my .env file;

GENERATE_SOURCEMAP=false

hope this helps.

luke-pitch commented 2 years ago

I solved this by modifying my webpack config. However I didn't need to eject my app as I'd already been using react-app-rewired to inject additional config - worth having a look for anyone needing to edit webpack config and not wanting to eject. This was the config setting: config.resolve.fallback = { fs: false, path: false }

steveilyo commented 2 years ago

You can create this in the src folder and react should pick it up. [image: Screenshot 2021-12-21 at 17.55.15.png]

the .env file is in the root.

On Tue, 21 Dec 2021 at 17:38, Ankit Kumar @.***> wrote:

I solved this issue by adding the fallback to my webpack.config.js file;

module.exports = { resolve: { fallback: { 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'), stream: require.resolve('stream-browserify'), }, }, };

using;

"dependencies": { @./jest-dom": "^5.16.1", @./react": "^12.1.2", @.***/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.2", "web3": "^1.6.1" },

but also need but got compilation errors on the build process:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

this was resolved by adding to my .env file;

GENERATE_SOURCEMAP=false

hope this helps.

How do you access webpack.config.js file where is the location

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11756#issuecomment-998970294, or unsubscribe https://github.com/notifications/unsubscribe-auth/AORFPCFPX5GJWJEQWFG4TA3USC3RDANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

-- Many Thanks Steve Winnington tel: 07810 026118 ln: steve-winnington https://www.linkedin.com/in/steve-winnington-305a0914

ankitaryan404 commented 2 years ago

`Compiled with problems:

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:\Blockchain\lottery-React\node_modules\cipher-base'