Fixing polyfill incompatibilities for webpack 5 in create-react-app

README.md

Fixing polyfill incompatibilities after upgrading to webpack 5 in create-react-app

After upgrading to the latest dependencies, I encountered the following errors:

'buffer' resolution

ERROR in ./node_modules/safe-buffer/index.js 2:13-30

Module not found: Error: Can't resolve 'buffer' in '/Users/geek.neo/propolis-portal/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 }

This was resolved simply by installing the buffer package with npm install -D buffer.

'fs' resolution

ERROR in ./node_modules/line-navigator/file-wrapper.js 9:16-29

Module not found: Error: Can't resolve 'fs' in '/Users/geek.neo/propolis-portal/node_modules/line-navigator'

This was resolved by setting a webpack fallback in the craco configuration, see craco.config.js in this gist.

craco.config.js

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            // eslint-disable-next-line no-param-reassign
            webpackConfig.resolve.fallback = {
                fs: false,
            };
            return webpackConfig;
        },
    },
}

Worked for me thanks 👍

Glad to hear it!