如何在不弹出的情况下将 WebPack polyfill 添加到使用 React Create App 创建的 React App？答案

【问题标题】：How do I add WebPack polyfill to React App created with React Create App without ejecting?如何在不弹出的情况下将 WebPack polyfill 添加到使用 React Create App 创建的 React App？
【发布时间】：2022-05-11 09:13:57
【问题描述】：

我有一个反应应用程序，我正在尝试使用一个库，它给我这些错误：

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

看来我需要向 WebPack 添加一个 polyfill。如何在不退出所有设置的情况下执行此操作？

【问题讨论】：

看看CRACO。它是一个无需弹出即可自定义 React 配置的工具。

标签： javascript node.js reactjs webpack

【解决方案1】：

yarn add react-app-polyfill core-js

然后，在与 index.js 相同的目录中手动创建 polyfills.js

导入'./polyfills'; // index.js

【讨论】：