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即可

// 原先
"moduleResolution": "bundler",
// 将bundler改为node即可
"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'

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

成功解决 YYDS！ 

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

解决方法 

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

六、useEffect 执行两次解决方法 

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

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

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？什么是点击劫持？如何防御