执行npx create-react-app后npm start报错：TypeError: Cannot read property 'split' of undefined 求助

我之前遇到过完全一样的问题，这个错误是由于eslint-webpack-plugin和react-scripts@4.0.1之间的版本兼容性冲突导致的，下面是几个亲测有效的解决步骤，按优先级排序：

方案1：升级react-scripts到4.x系列最新稳定版 #

react-scripts@4.0.1存在已知的依赖兼容性问题，升级到同系列的最新版可以直接解决这个问题：

• 执行升级命令：

  npm install react-scripts@4.0.3 --save
  

• 删除旧的依赖文件：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

• 再次启动项目：

  npm start
  

方案2：强制锁定eslint-webpack-plugin的兼容版本 #

如果不想升级react-scripts，可以通过npm-force-resolutions强制指定兼容的插件版本：

1. 先安装依赖锁定工具：

   npm install npm-force-resolutions --save-dev
   

2. 在package.json中添加resolutions字段，锁定eslint-webpack-plugin为2.4.1（该版本和react-scripts@4.0.1完全兼容）：

   "resolutions": {
     "eslint-webpack-plugin": "2.4.1"
   }
   

3. 修改package.json的scripts，添加preinstall钩子自动执行版本锁定：

   "scripts": {
     "preinstall": "npx npm-force-resolutions",
     // 保留你原有的其他脚本
   }
   

4. 删除旧依赖文件并重新安装：

   rm -rf node_modules package-lock.json
   npm install
   

5. 启动项目：

   npm start
   

方案3：检查自定义ESLint配置（如果有） #

如果你在项目中添加了自定义的.eslintrc文件或package.json中的eslintConfig字段，检查是否存在配置错误：

• 确保extends数组中的所有配置路径拼写正确、有效
• 暂时移除任何可能导致ESLint解析失败的自定义规则或第三方插件，排查是否是配置问题引发的错误

错误原因说明 #

在eslint-webpack-plugin的部分版本中，处理模块时会尝试读取一个未定义的属性并调用split()方法，而react-scripts@4.0.1默认依赖的插件版本范围包含了这个存在bug的版本，最终导致项目启动时崩溃。

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