React项目突发编译错误求助：模块缺失与Webpack 5兼容问题

先掰明白Polyfill是啥 #

简单说：浏览器里根本没有Node.js自带的url、fs这些核心模块。Polyfill就是一段代码，要么让浏览器能模拟这些模块的基础功能，要么让Webpack把这些模块替换成浏览器能识别的版本。Webpack 5之前默认帮你把这些事做了，现在得自己动手配置。

为啥加个段落标签就出问题？ #

<p>标签本身绝对不会搞出这种错误，大概率是你最近间接引入了某个依赖包（比如装了新组件库、工具，或者某个依赖偷偷更新了），这个包内部用到了Node.js的核心模块，刚好在这次编译时被揪出来了。

具体解决步骤（不用eject，推荐用craco） #

create-react-app默认不让直接改Webpack配置，用craco可以绕开这个限制，不用把配置全eject出来：

1. 先装craco和需要的polyfill包

npm install @craco/craco url path-browserify util --save-dev

注：fs是Node的文件系统模块，浏览器里根本用不了，后面直接让Webpack忽略它就行。

2. 在项目根目录新建craco.config.js文件，把下面代码粘进去：

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 配置Webpack的resolve.fallback，替换/忽略Node核心模块
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        url: require.resolve('url'),
        path: require.resolve('path-browserify'),
        util: require.resolve('util'),
        fs: false, // fs在浏览器环境没用，设为false让Webpack跳过解析
      };
      return webpackConfig;
    },
  },
};

3. 改一下package.json里的脚本命令，把react-scripts换成craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

4. 重启你的开发服务器，看看错误是不是没了。

要是还不行？ #

• 查最近装的依赖：用npm list看看新增的包，找出哪个包在调用url/fs这些模块，换成浏览器兼容的替代包。
• 如果你用了UI组件库，去看它的文档，很多库已经出了Webpack 5的适配指南，照着改就行。

内容的提问来源于stack exchange，提问作者Jason Ayer