Can't resolve 'os' , webpack 5

Question

So I was making a webpack5 application, as I added web3, I faced this issue

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 23:9-22

Module not found: Error: Can't resolve 'os' in 'C:\Users\Arex\Desktop\webpack5-react-boilerplate-master\node_modules\xhr2-cookies\dist'

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 }

Answer 1

I ran into a similar problem. It's because Webpack 5 doesn't include polyfills for node.js anymore.

A simple solution:

Add this plugin https://github.com/Richienb/node-polyfill-webpack-plugin to your webpack.config.js:

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

module.exports = {
    plugins: [
        new NodePolyfillPlugin()
    ],
}

This will add those node.js polyfills you're probably missing.

Answer 2

As of Dec 2022, the proper solution appears to be adding this to the top of your webpack.config.js:

target: "node"

Credit to: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-979735420

Answer 3

Step 1

Install os-browserify and react-app-rewired

npm install os-browserify react-app-rewired

Step 2

In your project root, create config-overrides.js file.

In this file, put this.

module.exports = function override (config, env) {
    console.log('override')
    let loaders = config.resolve
    loaders.fallback = {
        // existing configs...
        "os": require.resolve("os-browserify/browser"),
   }
    
    return config
}

Step 3

important !

Change "start": react-scripts start in your package.json to "start": react-app-rewired start

Now, restart your project.

npm start

Answer 4

i just had to add

        fallback: {
            os: false,
        },

to webpack config like the webpack error mentioned.