特定目录下npm start编译失败，Webpack配置路径含非法字符

问题根源 #

你碰到的Webpack编译失败，本质是项目路径被Webpack识别出包含loader语法保留字符!——虽然你给出的路径表面没有!，但大概率是这两个原因：

• 路径里的.js后缀被旧版Webpack解析逻辑误判，触发了类似loader语法的识别
• 两个项目依赖的react-scripts版本不同，新版本修复了特殊路径字符的解析问题

快速解决方案 #

1. 迁移项目到简洁路径 #

直接把C:/Programming/React.js/test移到无后缀的路径，比如C:/Programming/ReactTest，然后重新执行：

npm install
npm start

（路径里尽量避免带.js、空格、特殊符号，减少Webpack解析歧义）

2. 统一react-scripts版本 #

对比两个项目的package.json，把test项目的react-scripts版本改成和my-app一致的：

• 卸载当前版本：

npm uninstall react-scripts

• 安装匹配版本（比如my-app用的是5.0.1，就执行这个）：

npm install react-scripts@5.0.1

• 重启项目：

npm start

3. 暴露Webpack配置修改（进阶，不可逆） #

如果不想动路径或版本，执行eject暴露配置后修改：

注意：此操作不可逆，执行前务必备份项目文件

npm run eject

打开config/webpack.config.js，找到报错提到的cache.cacheDirectory、module.rules[1].oneOf[3].include、output.path这几个配置项，用path.resolve()规范化路径，比如：

output: {
  path: path.resolve(__dirname, '../build'),
  // 其他配置...
}

修改后重新启动项目即可。

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