巨坑!!! React启动报错 Module parse fai

今天在公司运行着 react 程序, 在家里用自己的电脑 npx create-react-app 项目名 玩的不亦乐乎, 一道公司这个命令就不行了, 我特么吐了啊. 我很菜, 我重新运行了三次这样的项目, 同样的命令还是不行, 差点崩溃.
然后想想会不会是我的react版本不一样导致的问题?把react-scripts版本号4.0.3改成了4.0.1 ,重新npm i加载依赖,最后可想而知,还是不行!!!然后发现会不会是项目命名的问题?然后顺藤摸瓜,发现了问题的所在.

报错:

./src/index.js 1:40
Module parse failed: Unexpected token (1:40)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> $RefreshRuntime$ = require('C:/Users/de'l'l/Desktop/react/my-app/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);

image.png

问题

可以仔细看一下这段路径有什么问题?
我的 PC 名称中有一个单引号字符de'l'l , 就因为这个单引号, 让react版本4.0.1~4.0.3运行崩溃, 为什么会崩溃这个我无法解释, 这要react官方给出答案,不过很有趣.

解决办法

只要该创建项目中的路径不包含单引号的文件名即可, 可以放到更高级别的文件夹,就可正常运行.

image.png