出现问题
环境:
vite@4.3.9
,
react@18.2.9
,
typescript@5.0.2
在使用vite@4.3.9构建
react
+
typescript
模板, 并且使用
vscode
运行项目时, vscode会报错:
Property 'div' does not exist on type 'JSX.IntrinsicElements'.
等原生元素引入错误.
引入
React
、
ReactDOM
等会报错
Module '"e:/vite-temp/node_modules/@types/react-dom/client"' has no default export.
在
tsconfig.json
中, 会报错
Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.
还可能会出现
Unknown compiler option 'allowImportingTsExtensions'.
这样的报错.
解决方法
将
tsconfig.json
中的
moduleResolution
的值改为
"node"
(注意
tsconfig.node.json
中的相同键也改为一致的值). 该配置修改可以解决原生元素引入问题.
将
tsconfig.json
中的
compilerOptions
内部加上
"esModuleInterop": true
这一个配置. 这样就可以解决引入
React
,
ReactDOM
时报错的问题.
将
tsconfig.json
中的
"allowImportingTsExtensions": true
配置放到与
compilerOptions
配置的同级位置.
原因
待续