Can't resolve 'crypto' - updating webpack to v.5

[danidev]

Hello,

To people like me that updated a project to webpack 5 and dropbox 9 and got this error:

ERROR in ./node_modules/dropbox/dist/Dropbox-sdk.min.js 1:30619-30636
Module not found: Error: Can't resolve 'crypto' in '/.../node_modules/dropbox/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: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }

The solution I've found was:

install node-polyfill-webpack-plugin

and on webpack config:

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

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

Hope this will help, I've lost a lot of time to figuring out it...

[greg-db]

Thanks for writing this up and sharing it!

[lorismithgenies]

Thank you! So helpful. My site was a Laravel Vue site so it was slightly different. I installed the node-polyfill-webpack-plugin like you suggested.

npm install node-polyfill-webpack-plugin

And, I had to add the following code to webpack.mix.js

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
mix.webpackConfig(webpack => {
    return {
        plugins: [
            new NodePolyfillPlugin()
        ]
    };
});

[justinmoon]

For anyone using Create React App (can't edit webpack config), this will fix it

[theawkwardchild]

thanks @danidev! your solution worked for me after much frustration 💚

[mheavenor]

I also just ran into this.

Should this open up a wider discussion regarding the use of this package? If it's designed to be used both in the browser and in a Node environment, why is it relying on Node core modules? If it's not designed to be used in the browser, does it make sense to create a second package that is?

[mlukianovich]

Had the same errors after updating Vue from 3.0.5 to currently the last 3.2.37 which uses Webpack 5. node-polyfill-webpack-plugin helps, thank you a lot!

[ydeera]

Thank you sooooo much! I spent whole afternoon to fix it:) Two tips: 1.If you build your project using creat-react-app, the webpack.config.js is in node_modules/react-scripts/config 2.Be careful,new NodePolyfillPlugin()should be set in plugins not resolve.plugins. I made this mistake at first time.