Multiple errors Module not found: Error: Can't resolve path, buffer, stream during upgrade to react-scripts 5.0.0

[kboul]

I am using react 17.0.2 with npm 7.14.0 and node 14.18.2 and try to upgrade to react-scripts 5.0.0.

I am using shpjs content-disposition jszip safe-buffer etc
When I run npm start after upgrading to react-scripts 5.0.0 I get:

Compiled with problems:X

ERROR in ./node_modules/content-disposition/index.js 19:15-39

Module not found: Error: Can't resolve 'path' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/content-disposition'

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/jszip/lib/readable-stream-browser.js 9:0-34

Module not found: Error: Can't resolve 'stream' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/jszip/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: { "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/safe-buffer/index.js 2:13-30

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/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 }


ERROR in ./node_modules/shpjs/lib/binaryajax-browser.js 7:15-39

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/shpjs/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: { "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/shpjs/lib/binaryajax-fetch.js 7:15-39

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/shpjs/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: { "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/shpjs/lib/index.js 21:15-39

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/shpjs/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: { "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 }

When using react-scripts 4.0.3 I was getting no errors at all.

To resolve these errors I installed each of the above-mentioned packages individually although I do not find the reason to install external dependencies in my project that are being used from the packages I use, I mean they should be alreay available there, created a webpack.config.js and included there:

module.exports = {
  resolve: {
    fallback: { path: false, buffer: false, stream: false }
  }
};

as I did not care including pollyfils and supporting old browsers.

I also tried this in case I wanted to support them.

module.exports = {
  resolve: {
    fallback: {
      buffer: require.resolve('buffer/'),
      path: require.resolve('path-browserify'),
      stream: require.resolve('stream-browserify')
    }
  }
};

I removed package-lock.json and node_modules hit npm i, npm start and I got this:

Uncaught ReferenceError: process is not defined
    at Object../node_modules/path/path.js (bundle.js:sourcemap:674629:17)
    at Object.options.factory (bundle.js:sourcemap:1195967:31)
    at __webpack_require__ (bundle.js:sourcemap:1195348:33)
    at fn (bundle.js:sourcemap:1195638:21)
    at Object../node_modules/content-disposition/index.js (bundle.js:sourcemap:543216:17)
    at Object.options.factory (bundle.js:sourcemap:1195967:31)
    at __webpack_require__ (bundle.js:sourcemap:1195348:33)
    at fn (bundle.js:sourcemap:1195638:21)
    at Module../src/utils/files.js (bundle.js:sourcemap:235901:77)
    at Module.options.factory (bundle.js:sourcemap:1195967:31)

have tried all the possible solutions that can be found on the net but with no luck including this thread and this one

I have also installed process library and declare it in the webpack. Still the same error. How do I resolve this? Any recommendations are welcome.
Stackoverflow link: https://stackoverflow.com/questions/71144674/referenceerror-process-is-not-defined-at-object-node-modules-path-path-js-bu

[brandonklk]

with same problem

[aldipee]

some problem here

[simonbuchan]

Webpack 5 has a bunch of breaking changes, as with any major release.

One of these changes is described by that error message:

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 }

So you must do as the error messages says and both configure webpack to use a polyfill for each node core module (it suggests the polyfill webpack 4 uses), and install the polyfill. Of course, you can't change the react-scripts webpack config, so you're stuck.

The best option here is for CRA to support you extending the webpack config, for so many reasons, but the probable best option (again, for CRA) is to add every polyfill and configure them all to be used, to support all the existing NPM packages.

[james-ingold]

I'm using react-app-rewired temporarily, hoping this gets sorted out. Allows extension of webpack.config without ejecting.

yarn add -D assert path https-browserify os os-browserify stream-browserify stream-http react-app-rewired process

config.overrides.js

module.exports = function override (config, env) {
  config.resolve.fallback = Object.assign(config.resolve.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.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ])
  return config
}

[floomby]

What is the correct fix to this? Should it happen here or should it be a change to webpack such as adding a flag to enable the previous behavior?

If the change was going to be to cra one option for the fallbacks would be to have the webpack config look at the installed modules and add the fallbacks as needed.

If no one is working on this I am willing to put some time into fixing this, but I personally don't know which would be the best approach.

[kurund]

I am also facing the same issue. Any suggestions on the best way to resolve this?

[floomby]

I am also facing the same issue. Any suggestions on the best way to resolve this?

Using react-app-rewired works well as mentioned above works well. Before I started doing that I was using patch package to patch the webpack config. Ejecting is also an option, but I have avoided doing this personally.

[kurund]

@floomby

Thank you. I am using react-app-rewired and it fixes this issue.

[dcporter44]

I was running into this exact issue too. I finally figured it out.

My app was using the popular npm package jsonwebtoken. This library has dependencies on Node.js core modules. I was only using this library to decode JWT's, so I replaced it with the package jwt-decode which has no dependencies. Everything seems to work now.

If you're not using the jsonwebtoken library, I recommend going through any other packages your app has installed and figuring out which one(s) are using Node.js core modules.

[kboul]

@james-ingold Using react-app rewired is really messy and you end up installing a ton of dependencies you do not need as well as receiving various errors such as
[eslint] Plugin "react" was conflicted between ".eslintrc" and "BaseConfig » /home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/react-scripts/node_modules/eslint-config-react-app/base.js". I did not manage to make my app run without receiving any error. Actually it keeps crashing as it is a big app with many dependencies.
It is ridiculous that after so much time a single library contributor has not responded or giving any hint or possible solution to the problem.
The correct solution is what dcporter44 describes, however, you cannot always afford to change dozens files of code that use libraries which up until recently were playing well with webpack 4.