How do I add WebPack polyfill to React App created with React Create App without ejecting?

Question

I have a react App and I'm trying to use a library which gives me these errors:

ERROR in ./node_modules/esm/esm.js 30:10-27
Module not found: Error: Can't resolve 'module' in '.../node_modules/esm'
 @ ./node_modules/beer-color/index.js 3:10-24

ERROR in ./node_modules/esm/esm.js 33:4-17
Module not found: Error: Can't resolve 'vm' in '.../node_modules/esm'

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: { "vm": require.resolve("vm-browserify") }'
    - install 'vm-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "vm": false }
 @ ./node_modules/beer-color/index.js 3:10-24

It seems I need to add a polyfill to WebPack. How can I do this without having to eject all settings?

Answer 1

yarn add react-app-polyfill core-js

Then, create polyfills.js manually on the same directory with index.js

import './polyfills'; // index.js