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

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

[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.

[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
}