Webpack 5 Breaking Changes "process/browser"

Question

Screenshot for Error: Can't resolve 'process/browser':

I'm hoping someone could help me here. With the Webpack 5 breaking changes with polyfills I was able to use react-rewired to add fallbacks to a config-overrides.js

I npm installed every dependency I could, but I'm still getting this error for "process/browser". I'm not really sure how to identify the problem.

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"),
    zlib: require.resolve("browserify-zlib"),
    fs: require.resolve("browserify-fs"),
    process: require.resolve("process"),
    buffer: require.resolve("buffer"),
    net: require.resolve("net"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
}; 

Micmac

Answer 1

I was having the exact same problem, and eventually found this https://github.com/react-dnd/react-dnd/issues/3425#issuecomment-1214554950.

I added 'process/browser': require.resolve('process/browser') to the fallbacks object without changing anything else and it worked. Hopefully it fixes it for you too.

Usher

Answer 2

I have a working solution to a similar upgrade that includes these lines in config.override.js:

let plugs = config.plugins;

plugs.push(new webpack.ProvidePlugin({
    Buffer: ['buffer', 'Buffer'],
}));
plugs.push(new webpack.ProvidePlugin({
    process: 'process/browser.js'
}))

Here it's calling new webpack.ProvidePlugin(... for each plug in, not trying to create both in one constructor. Your code above might be adapted to something more like:

config.plugins = (config.plugins || []).concat([
  new webpack.ProvidePlugin({
    process: "process/browser",
  }),
  new webpack.ProvidePlugin({
    Buffer: ["buffer", "Buffer"],
  })
]);

...although I haven't tried this exactly.

Canaan

Thank you for the reply. I tried your solution, but it seems that I couldn't catch the dependencies from my build with react app rewired. I manually put my fallbacks into node_modules/react-scripts/config/webpack.config.js. like this resolve: { fallback: { "crypto": require.resolve("crypto-browserify"), "http": require.resolve("stream-http"), "fs": require.resolve("browserify-fs"), "assert": require.resolve("assert"), "os": require.resolve("os-browserify"), "async_hooks": false, "express": false, }, } – Overcritical

now i'm getting this error: "WARNING in ./node_modules/express/lib/view.js 74:13-25 Critical dependency: the request of a dependency is an expression" – Overcritical

If you're following the react app rewired documentation, there's no need to directly change webpack config - use the override config. – Canaan

that's what I thought but I'm still getting the same error either way. – Overcritical

heroku is probably going to hate me when deploying all of these NPM packages but I was able to fix the issue by putting this line in nodemodules/react-scripts/config/webpack.config.js externals: [{ 'express': { commonjs: 'express' } }] – Overcritical