Webpack 5 'BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default' / 'Module not found: Can't resolve crypto, path, stream, buffer' - how do I fix it?

Cause: webpack 4 silently bundled browser polyfills for Node.js core modules (path, crypto, stream, buffer and so on). Webpack 5 removed that, so any browser-targeted code (yours or a dependency's) that imports them fails to resolve. A related runtime error is 'process is not defined', since webpack 5 also no longer polyfills process. Fix (best first): 1. First ask whether the code needs the module in the browser at all. Prefer dependencies that ship browser builds through the package.json exports/imports fields, or avoid the Node API in frontend code. 2. For modules you truly need, install a browser-compatible package and map it in resolve.fallback. Example: npm install path-browserify, then resolve: { fallback: { path: require.resolve('path-browserify') } } The webpack documentation lists suggested packages per core module (for example crypto-browserify, stream-browserify, buffer, os-browserify, url, util). Add only the ones the error names. 3. For modules that are imported but never executed in the browser, disable them: resolve: { fallback: { fs: false, path: false } }. This replaces the old node.fs: 'empty' style setting. 4. For process.env.SOME_VAR, use DefinePlugin or EnvironmentPlugin to substitute values at build time instead of polyfilling process. Wrapping uses in typeof process checks also works but increases bundle size. 5. Remove the old node: { Buffer: false, process: false } option from the configuration; webpack 5 dropped it. 6. If you need a mapping to win over an installed package of the same name, use resolve.alias, which is applied before fallback. Verify: rebuild and confirm no Module not found errors remain and the bundle size is acceptable; test the affected feature in a browser. Sources: https://webpack.js.org/configuration/resolve/ https://webpack.js.org/migrate/5/