How to support polyfills without webpack file

Hello, a few of my nodemodules/ dependencies are using modules that need polyfills, so webpack is throwing errors and my app won’t compile. How do we specify polyfills if Ionic React app does not provide a webpack file?

ERROR in ./node_modules/jws/lib/sign-stream.js 8:13-30
Module not found: Error: Can’t resolve ‘stream’ in ‘/Users/whitneypurdum/Documents/Eliarebeam/rebeam-monorepo/packages/client/node_modules/jws/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 }

This is a problem with create-react-app v5, which is what is giving you webpack 5.

It’s an open issue upstream.

Since it’s a long issue here’s a short summary. CRA4 to CRA5 switched from webpack 4 to webpack 5, which removed polyfills.

CRA doesn’t provide a way to customize config out of the box, so until they fix it you can:

  • Roll back to CRA v4/webpack 4.
  • eject from CRA and add the polyfills yourself
  • Use Craco to override the config when they fix this issue

I think the bigger thing to point out here is that the package that is missing polyfills is for node, not the browser. jws was meant to run in node, not the browser…so you shouldn’t be using this in a web app…