React项目启动报错：Module not found: Can't resolve 'util' 如何解决？

问题原因 #

Webpack 5不再默认提供Node.js核心模块的polyfill，而你的项目依赖的sass包引用了util模块，导致启动时出现模块找不到的错误。

解决方案 #

方案一：添加util polyfill

1. 安装util包

   npm install util
   

2. 修改Webpack配置（以Create React App项目为例，需借助craco修改配置）
   • 安装craco工具

     npm install @craco/craco --save-dev
     

   • 修改package.json中的启动脚本：

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

   • 在项目根目录创建craco.config.js，添加如下配置：

     module.exports = {
       webpack: {
         configure: {
           resolve: {
             fallback: {
               "util": require.resolve("util/")
             }
           }
         }
       }
     };
     

3. 重新运行npm start

方案二：禁用util polyfill（使用空模块）

如果确认不需要util模块的polyfill，可直接配置Webpack忽略该模块：

1. 按照方案一的步骤安装并配置craco后，修改craco.config.js：

   module.exports = {
     webpack: {
       configure: {
         resolve: {
           fallback: {
             "util": false
           }
         }
       }
     }
   };
   

2. 重新运行npm start

备选方案：升级sass版本

部分旧版本sass可能存在Webpack 5兼容问题，尝试升级到最新版本：

npm install sass@latest

然后重新启动项目。

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