今天在公司运行着 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
