使用npx create-react-app创建React项目后npm start启动时编译失败

触发这次编译失败的根本原因是项目存放的本地路径包含未转义的单引号（撇号）字符，也就是你当前项目路径D:/Project's/React/CRUD-Operations/client里Project's附带的单引号。

开发模式下，@pmmmwh/react-refresh-webpack-plugin会自动向入口文件src/index.js注入热更新运行时代码，生成的代码片段和你贴的报错内容完全一致：

$RefreshRuntime$ = require('你的node_modules中react-refresh的绝对路径');
$RefreshSetup$(module.id);

这个插件在生成注入代码时，没有对路径中的单引号做转义处理，路径里的'会直接提前闭合require语句的字符串边界，后续的路径片段会被JS解析器判定为非法语法，刚好命中你报错提示的第1行第39列位置。就算后续经过babel-loader处理，也没法修复这段本身就存在语法错误的注入代码。

• 最快排障方案：把项目文件夹移到不含单引号、特殊符号的纯英文路径下，比如将原来带撇号的Project's文件夹重命名为Projects，重新执行npm install还原依赖后，运行npm start即可正常启动。
• 无需迁移路径的临时方案：在项目根目录新建.env配置文件，写入一行配置FAST_REFRESH=false，关闭开发服务器的快速热更新能力，直接绕过react-refresh插件的代码注入流程，从根源上避免这段带语法错误的代码被生成。
• 长期版本修复方案：将项目依赖的react-scripts升级到5.0.1及以上版本，该版本已经修复了路径特殊字符未转义导致的注入代码语法错误问题。

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