Breaking change in webpack within my react app

Question

I have a react app. I ran my react app and started getting the following error messages reported to me. Im unsure as to why I started getting this error nor do i know what the I need to fix. Does anyone know what this is and how to fix it?

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: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }

ERROR in ./node_modules/saslprep/lib/memory-code-points.js 3:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/benstacey/Documents/GitHub/farm/node_modules/saslprep/lib'

ERROR in ./node_modules/saslprep/lib/memory-code-points.js 4:13-28
Module not found: Error: Can't resolve 'path' in '/Users/benstacey/Documents/GitHub/farm/node_modules/saslprep/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: { "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/socks/build/client/socksclient.js 35:12-26
Module not found: Error: Can't resolve 'net' in '/Users/benstacey/Documents/GitHub/farm/node_modules/socks/build/client'

ChatGPT recommend making a file called webpack.config.js and then adding the following

module.exports = {
  // Other configurations...
  resolve: {
    fallback: {
      stream: require.resolve("stream-browserify"),
    },
  },
};

But that didnt work.

I also tried following this import web3 into react js getting BREAKING CHANGE: webpack < 5 used to incl

but got

(base) benstacey@Bens-MBP farm % npm i web3, react-app-rewired, url, assert, buffer, crypto-browserify, stream-http, https-browserify, stream-browserify, os-browserify   
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "web3," of package "web3,": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in: /Users/benstacey/.npm/_logs/2023-08-09T06_04_08_759Z-debug-0.log

Breaking change in webpack within my react app

0 Answers0