webpack中如何Polyfill节点核心模块 5

Question

webpack 5 no longer do auto-polyfilling for node core modules. How to fix it please?

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.

Answer 1

I was also getting these error's when upgrading from webpack v4 to v5. Resolved by making the following changes to webpack.config.js

added resolve.fallback property

removed node property

{
resolve: {
  modules: [...],
  fallback: {
    "fs": false,
    "tls": false,
    "net": false,
    "path": false,
    "zlib": false,
    "http": false,
    "https": false,
    "stream": false,
    "crypto": false,
    "crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify 
  } 
},
entry: [...],
output: {...},
module: {
  rules: [...]
},
plugins: [...],
optimization: {
  minimizer: [...],
},
// node: {
//   fs: 'empty',
//   net: 'empty',
//   tls: 'empty'
// },
}

upgrade from v4 to v5 => https://webpack.js.org/migrate/5/#clean-up-configuration

Answer 2

I think most the answers here would resolve your issue. However, if you don't need Polyfills for your node development, then I suggest using target: 'node' in your Webpack module configuration. This helped resolve the issue for me.

Here is some documentation on the answer: https://webpack.js.org/concepts/targets/

Answer 3

Re-add support for Node.js core modules with node-polyfill-webpack-plugin :

With the package installed, add the following to your webpack.config.js:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

Answer 4

I faced this issue with create-react-app which by default gave me

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"

I fixed it by just changing react-scripts to version 4.0.3 .

Answer 5

Looks like you've used the path package which is not included in webpack builds by default. For me, extending the webpack config like this helped:

{
  // rest of the webpack config
  resolve: {
    // ... rest of the resolve config
    fallback: {
      "path": require.resolve("path-browserify")
    }
  },
}

Also install path-browserify via npm install path-browserify --save-dev or yarn add path-browserify --dev if you're using yarn.

Answer 6

As per Web3 documentation :

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution:

Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Create config-overrides.js in the root of your project folder with the content:

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired before:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

after:

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

The missing Nodejs polyfills should be included now and your app should be functional with web3.

If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings = [/Failed to parse source map/];

Answer 7

You need React => v17 React scripts=> v5 webpack => v5

To Fix The Problem

1) Install

"fs": "^2.0.0",  // npm i fs
"assert": "^2.0.0",  // npm i assert
"https-browserify": "^1.0.0", // npm i https-browserify
"os": "^0.1.2", // npm i os
"os-browserify": "^0.3.0", // npm i os-browserify
"react-app-rewired": "^2.1.9", //npm i react-app-rewired
"stream-browserify": "^3.0.0", // stream-browserify
"stream-http": "^3.2.0", //stream-http

2) Creating config-overrides.js in root directory Image

3) Add configs to config-overrides.js

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;
}

3) Change packages.json

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

Problem solved :)

Answer 8

Create React App just released v5 which now implements Webpack v5. This is going to fully break many libraries which includes web3 as the required Node core library polyfills will be missing.

To resolve this quickly you can change this in your package.json:

"react-scripts": "^5.0.0"

To this

"react-scripts": "4.0.3"

After this:

rm -r node_modules

rm package-lock.json

npm install

Answer 9

It happen with me while I reinstall the node modules my webpack current version is 5.38.1 , I have fixed the issue with npm i path-browserify -D after installation you have to update your webpack.config.js resolve{} with fallback: {"fs": false, "path": require.resolve("path-browserify")} while not using "fs": false it show errors ie: Module not found: Error: Can't resolve 'fs' in '/YOUR DIRECTORY ...' so don't forget to add it; with other stuff it look like:

module.exports = {
   ...
   resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
    fallback: {
      "fs": false,
      "path": require.resolve("path-browserify")
    }
  },
};

remove node property if it exist in your webpack.config.js file

Answer 10

My environment is like this:

• React => v17
• React scripts=> v5
• webpack => v5

To Fix The Problem follow the below instructions

1- Install below packages

yarn add fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired

2- Create config-coverrides.js in Root dir of your project next to the package.json

add the below code to it:

 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; }

3- Change the packages.js like the below

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

Answer 11

npm install path-browserify and then try to change webpack configuration to include:

module.exports = {
    ...
    resolve: {
        alias: {
            path: require.resolve("path-browserify")
        }
    }
};

Answer 12

Method 1

• Open project/node_modules/react-scripts/config/webpack.config.js

• In fallback add "crypto": require.resolve("crypto-browserify")

resolve: {
   fallback: {
       "crypto": require.resolve("crypto-browserify")
   }
} 

• Install npm i crypto-browserify
• Restart your app.

Above method doesn't work if you commit since we aren't node_modules

Method 2

• Install patch-package: yarn add patch-package

• Install the needed pollyfills.(do an initial build of your application and it will tell you.)

• Modify node_modules/react-scripts/config/webpack.config.js . Here's an example . This is taken from Webpack's docs.

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

• Don't add all of them, add only the ones you need.

Make sure you install the packages first before modifying the webpack config.

• Run yarn patch-package react-scripts . This will generate a patch (this should be committed in your repo going forward).

• Add a postinstall script to package.json: "postinstall": "yarn patch-package" . Now, anytime, someone installs npm deps on this project, will get the patch you created in step 3 applied automatically.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "yarn patch-package"
  },

Answer 13

My solution for VUE

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
      new webpack.ProvidePlugin({
          process: 'process/browser',
      })
    ],
    resolve: {
      fallback: {
        "os": require.resolve("os-browserify/browser"),
        "url": require.resolve("url/"),
        "crypto": require.resolve("crypto-browserify"),
        "https": require.resolve("https-browserify"),
        "http": require.resolve("stream-http"),
        "assert": require.resolve("assert/"),
        "stream": require.resolve("stream-browserify"),
        "buffer": require.resolve("buffer")
      }
    }
  },

  transpileDependencies: [
    'vuetify'
  ]

})

Answer 14

I'm using create-react-app with craco , and I encountered the following errors when upgrading to webpack 5:

'buffer'

Module not found: Error: Can't resolve 'buffer' in '/Users/geek.neo/propolis-portal/node_modules/safe-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

This was resolved simply by installing the buffer package with npm install -D buffer .

'fs'

Module not found: Error: Can't resolve 'fs' in '/Users/geek.neo/propolis-portal/node_modules/line-navigator'

This was resolved by setting a webpack fallback in the craco configuration craco.config.js :

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            // eslint-disable-next-line no-param-reassign
            webpackConfig.resolve.fallback = {
                fs: false,
            };
            return webpackConfig;
        },
    },
}

Answer 15

you want to used in

const nodeExternals = require('webpack-node-externals');

add in webpack.config.js

target: "node",
devtool: "source-map",
externals: [nodeExternals()],

Answer 16

npm install assert --save

npm install buffer --save

For anyone facing similar issue, just install the missing modules. These modules are reported as missing because they are part of node.js, but are available separately also via the npm.

Answer 17

This is happening with the new vue-cli upgrade (v5). In order to fix it (the empty modules way), you have to change vue.config.js this way:

configureWebpack: (config) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    // Include here the "empty" modules
    url: false,
    util: false,
    querystring: false,
    https: false,
  };
}

Answer 18

Fix this problem with this i try this and it's works

https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736

Answer 19

My app threw the same error yesterday. I spent hours reading questions/answers here on SO and trying some. What has worked for me is this:

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

Answer 20

If it's Twilio you use:

The Twilio module is not intended for use in client-side JavaScript, which is why it fails for your Angular application. Twilio uses your Account SID and your Auth Token, the use in the client side represents a risk; So the best is to use it on the server side and to use the API.

Answer 21

With create-react-app v17 and scripts 5.0.0 you need to add a fallback to your webpack.config.js and install 'process'.

   `module.exports = function (webpackEnv) {
      .........
      return {
       .........
      resolve: {
      ..........
      fallback: { "process": require.resolve("process/browser") },`

Answer 22

Secret's answer very nearly worked for me (I don't have enough reputation yet to comment on there, sorry!)

After having followed the steps in their answer it then told me that because of the difference in required versions of eslint, I should add SKIP_PREFLIGHT_CHECK=true to a .env file in the project, so I just added it to my existing one.

It would then successfully build (finally!) But then I noticed, in Chrome at least, that I couldn't click on anything or even select any text. Turns out that there's still an Iframe over the top of everything that can be removed in Inspector. - This applies when running a dev build, npm run start , I am not sure if it does it on a production build.

I must say this sudden change IMO really hasn't been very well thought through!

Answer 23

my problem was that I was trying to use JSON.parse, then when I started writing , auto complete showed me json(note small letters) though I renamed it to JSON. when I pressed enter it automatically imported (import { json } from "express/lib/response";) it was the cause and I didn't notice it at all , later in development my app was crushing and it took me about six hours to note, since the app is quite big.

so if none of the above solutions work just see if you didn't import something .

Answer 24

I found a solution that worked for me:

1. npm uninstall webpack
2. delete the "package-lock.json" file
3. npm install webpack@4.44.2 --force
4. include in the "package.json" file the following in your "scripts":

    "scripts": { "start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start", "build": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }

Answer 25

I got this error while imported Router from express import { Router } from 'express';

Resolved after correction import { Router } from '@angular/router';

Answer 26

Faced the same issue, here's solution:

1. remove "package-lock.json" from the project folder and 'npm uninstall webpack'
2. downgrade "react-script" from '5.something' to '4.0.3'
3. make sure "package-lock.json" is deleted/removed
4. Install webpack using 'npm install webpack@4.44.2'
5. Finally, run 'npm install' using the terminal

Answer 27

I tried this https://stackoverflow.com/a/71803628/15658978 solution and it solved the problem form me.

simply run the following 2 commands

npm uninstall react-scripts
npm install react-scripts@4.0.3

Answer 28

Compiled with problems:X

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26

Module not found: Error: Can't resolve 'zlib' in 'E:\My Documents\work\web\mbamasala\node_modules\body-parser\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: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 217:12-34

Module not found: Error: Can't resolve 'querystring' in 'E:\My Documents\work\web\mbamasala\node_modules\body-parser\lib\types'

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: { "querystring": require.resolve("querystring-es3") }'
    - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "querystring": false }


ERROR in ./node_modules/destroy/index.js 15:17-41

Module not found: Error: Can't resolve 'fs' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'


ERROR in ./node_modules/destroy/index.js 17:13-30

Module not found: Error: Can't resolve 'stream' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }


ERROR in ./node_modules/destroy/index.js 19:11-26

Module not found: Error: Can't resolve 'zlib' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'

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: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/mime-types/index.js 15:14-37

Module not found: Error: Can't resolve 'path' in 'E:\My Documents\work\web\mbamasala\node_modules\mime-types'

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 }


ERROR in ./node_modules/safer-buffer/safer.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in 'E:\My Documents\work\web\mbamasala\node_modules\safer-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }


ERROR in ./node_modules/string_decoder/node_modules/safe-buffer/index.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in 'E:\My Documents\work\web\mbamasala\node_modules\string_decoder\node_modules\safe-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

---

I tried many solution but didn't resolve. After Searching manually I got a single line of code which was inserted automatically in my vs code which was import {json} from 'body-parser' I removed and saved my time. I hope it may help someone. Thanks.

Answer 29

For me (using React => v17; React scripts=> v5; webpack => v5), a combination of solutions suggested by @Letton and @Richie Bendall worked along with another addition, ie to the package.json, the following packages had to be added and installed. Please also note that fs version "^2.0.0" throws an error, so changed to "0.0.1-security".

"assert": "^2.0.0", 
"https-browserify": "^1.0.0", 
"os": "^0.1.2",
"os-browserify": "^0.3.0",
"react-app-rewired": "^2.1.9",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"fs":"^0.0.1-security",
"crypto-browserify": "3.12.0",
"buffer":"^6.0.3",
"node-polyfill-webpack-plugin": "^2.0.1"

After installation of these, executing the remaining steps, ie adding config-overrides.js to the root directory and changing scripts content in package.json from react-scripts to react-app-rewired fixed the problem.

Answer 30

Make sure you are not importing the following from express or even json or something else

import { response } from 'express' // response in my case

For anyone who is using React (happened to me in react). I have even read with NextJs this works but haven't tested it.

Man I did everything like config-overrides (Vitto's answer) and node modules webpack config file updates and also changed react-scripts version 5 to 4 but nothing worked. But as soon as I removed response . It worked.

That one line only made me go into 7 hours of debugging mode.

But always enjoy it:)

Answer 31

ERROR : [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.

Answer: node_modules > react-scripts > config > webpack.config.js

Add in webpack.config.js file:

resolve: {
      fallback: { 
        "http": require.resolve("stream-http") ,
         "path": require.resolve("path-browserify") 
        },
}

Answer 32

I like to keep things simple, no need to run npm run-script eject until here, so I downgrade back to react-scripts@4.0.3 instead of 5.0.0 Until now, this is still not fixed in Webpack

Sadly, because that includes a bunch of retired packages.

Answer 33

for me, I just removed an unused import called:

import res from "express/lib/response"

and it fixed it!