当前位置:   article > 正文

react项目异常报错解决_react 前端首页请求 报错

react 前端首页请求 报错

目录

一、找不到模块“XXX”。你的意思是要将 "moduleResolution" 选项设置为 "node",还是要将别名添加到 "paths" 选项中?

二、未知的编译器选项“allowImportingTsExtensions”。

三、ReactDOM模块react-dom/client没有默认导出报错解决办法

四、导入路径不能以“.tsx”扩展名结束。考虑改为导入“./App.js”

五、An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is ena         bled. 

六、useEffect 执行两次解决方法 


最近在整改优化react框架的一个项目,遇到一些异常报错,记录下,方便以后使用。

一、找不到模块“XXX”。你的意思是要将 "moduleResolution" 选项设置为 "node",还是要将别名添加到 "paths" 选项中?

把tsconfig.json和tsconfig.node.json中的moduleResolution改成node即可

  1. // 原先
  2. "moduleResolution": "bundler",
  3. // 将bundler改为node即可
  4. "moduleResolution": "node",

二、未知的编译器选项“allowImportingTsExtensions”。

原因

该选项用于控制是否允许在 import 语句中导入 .ts 文件扩展名,它的取值可以是 true 或 false。但是,从 TypeScript 3.8 开始,这个选项已经被废弃了,查看typescript版本是不是高于3.8了。那么如何修复呢?

解决方案
删除tsconfig文件中的"allowImportingTsExtensions": true,将moduleResolution设置为"node",并在导入时保留文件扩展名。

三、ReactDOM模块react-dom/client没有默认导出报错解决办法

import ReactDOM 模块“"/home/fuchaoyang/Desktop/developer-authorization/node_modules/@types/react-dom/client"”没有默认导出。

解决方案

只需要在tsconfig.json里面添加配置 "esModuleInterop": true 即可

 四、导入路径不能以“.tsx”扩展名结束。考虑改为导入“./App.js”

解决方案

在声明文件vite-env.d.ts中添加declare module '*.tsx'

  1. /// <reference types="vite/client" />
  2. declare module '*.tsx'

成功解决 YYDS! 

五、An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled. 

解决方法 

不需要.tsx, 直接引入文件即可

六、useEffect 执行两次解决方法 

useEffect 执行了两次,我找了好久,一直以为是自己的代码问题,

  1. useEffect(() => {
  2. console.log("useEffect调用了~");
  3. },[]);

  

react18将useEffect的默认运行改为了两次。这个更改只有在开发模式才会发生,且只在只在 strict mode 发生,恰恰如此无疑令很多开发者感觉很蛋疼。

解决方法

找到入口文件 main.tsx 或者 main.jsx 文件,将里面的 <React.StrictMode></React.StrictMode> 注释掉即可。

 

成功解决 YYDS!  

今天就总结到这里啦! 后续博主会持续更新。。。。,欢迎在评论区交流。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下!

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表(Normalize.css)

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略(面试一网打尽)!

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些?

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击?什么是 CSRF?什么是点击劫持?如何防御

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/845556
推荐阅读
相关标签
  

闽ICP备14008679号