使用create-react-app创建React应用启动时触发TypeError: Cannot read property 'split' of undefined错误的问题求助

嘿，这个错误我之前搭React项目时也碰到过，别慌，大概率是eslint-webpack-plugin的版本兼容问题搞的鬼，给你几个实用的解决方案：

方案一：清理依赖缓存并重新安装 #

这是排查依赖问题的通用操作，很多冲突都能靠它解决：

• 先删掉项目根目录下的node_modules文件夹
• 删除package-lock.json文件（用yarn的话就删yarn.lock）
• 执行命令 npm install 重新安装所有依赖
• 安装完成后再试试运行 npm start

方案二：指定兼容的eslint-webpack-plugin版本 #

错误日志明确指向了这个插件的代码问题，我们可以手动锁定一个稳定兼容的版本：

1. 如果你用npm，先装个强制版本锁定的工具：npm install npm-force-resolutions --save-dev
2. 在package.json里添加以下配置：

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

3. 再给scripts加个预处理命令：

"scripts": {
  "preinstall": "npx npm-force-resolutions",
  // 保留你原来的start/build等命令
}

4. 重新执行npm install，然后启动项目

嫌麻烦的话也可以直接安装指定版本：

npm install eslint-webpack-plugin@2.5.2 --save-dev

方案三：临时禁用ESLint插件（仅用于排查） #

如果上面的方法暂时没见效，你可以先关掉ESLint确认问题根源：
修改package.json里的start命令：

"scripts": {
  "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
  // 其他原有命令不变
}

然后运行npm start，如果能正常启动，就实锤是ESLint插件的版本问题，再回到方案二彻底解决就行。

为啥会出现这个错误？ #

本质是eslint-webpack-plugin的某个版本里，处理模块路径时没做undefined判断就调用了split方法，而create-react-app的内部依赖组合刚好触发了这个bug，锁定兼容版本或者清理依赖就能搞定。

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