Create React App启动报错：TypeError: Cannot read property 'split' of undefined 求助

问题描述 #

我创建了一个名为client的文件夹，执行npx create-react-app ./初始化了React项目，全程没有修改任何生成的默认文件，但运行npm start时出现了如下错误：

TypeError: Cannot read property 'split' of undefined
    at processModule (C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\eslint-webpack-plugin\dist\index.js:93:38)
    at SyncHook.eval [as call] (eval at create (C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:1)
    at SyncHook.lazyCompileHook (C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\webpack\lib\Compilation.js:781:30
    at MultiModule.build (C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\webpack\lib\MultiModule.js:39:10)
    at Compilation.buildModule (C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\webpack\lib\Compilation.js:739:10)
    at C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\webpack\lib\Compilation.js:1111:12
    at MultiModuleFactory.create (C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\webpack\lib\MultiModuleFactory.js:18:3)
    at C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\webpack\lib\Compilation.js:1063:18
    at Semaphore.acquire (C:\Users\Vishruth S\NodeJS_progs\mernstack\client\node_modules\webpack\lib\util\Semaphore.js:29:4)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Vishruth S\AppData\Roaming\npm-cache\_logs\2021-01-19T14_02_31_823Z-debug.log

解决方案 #

这个错误是2021年初eslint-webpack-plugin的特定版本存在bug导致的，你可以尝试以下几种方法解决：

方法1：降级eslint-webpack-plugin到稳定版本 #

1. 先删除项目根目录下的node_modules文件夹和package-lock.json文件
2. 执行命令安装指定版本的插件：

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

3. 重新安装所有依赖：

   npm install
   

4. 再次尝试启动项目：

   npm start
   

方法2：升级react-scripts到最新版本 #

后续更新的react-scripts已经修复了这个依赖兼容问题，直接升级即可：

npm install react-scripts@latest

升级完成后再运行npm start就能正常启动项目了。

方法3：临时禁用ESLint（不推荐长期使用） #

如果只是需要临时启动项目测试功能，可以修改package.json中的start脚本，添加--no-eslint参数跳过ESLint检查：

"scripts": {
  "start": "react-scripts start --no-eslint",
  // 其他脚本保持不变
}

修改后执行npm start就能正常启动，但建议之后还是用前两种方法彻底解决问题。

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