构建 React 通常大意会报的错,每次都不记得,那就记录下吧

794 阅读1分钟

1 -- 执行 yarn install 或者 yarn add 某个插件报如下错误,错误表示node版本不一致

qw2.jpg

  • 错误报的是Node版本不一致,不是npm版本不一致,网上建议更新npm的实际上是没用的, Fxxx!!
  • yarn config set ignore-engines true 设置这条命令,然后再该干嘛就干嘛,Fxxx up ~!

2 -- 报错: Support for the experimental syntax 'jsx' isn't currently enabled

qw.jpg

qw1.jpg

  • 通常忘了在根目录下配置 .babelrc 文件,vue/react 配置各不相同自行解决

3 -- 报错:ERROR in Error: Child compilation failed:

qw3.jpg

qw4.jpg

  • 是在index打包的时候htmlwebpackplugin的是生成的模板路径格式错误
  • template: "src/index.html" 当前根目录下的 src/index.html
  • template: path.resolve(__dirname, "../src/index.html") 也可以

4 -- Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17

qw5.jpg

  • 由于React 18不再支持 ReactDOM.render, 警告信息,虽然不会影响程序正常的运行,但是控制台一直有警告确实不爽。在index.js入口文件中改用 createRoot 即可消除警告

5 -- 这个不是报错,是大意,我今天就浪费了好久

qw6.jpg

  • http://localhost:3030/#/star 记住手动在url打地址要/#/ !!!!
  • 一开始我直接 / star ,懵逼了,一直匹配不到

结语

前端交流QQ群:249620372 ---- FRONT-END-JS前端

前端react QQ群:788023830 ---- React/Redux - 地下老英雄

(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习