出现问题
环境: 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
配置的同级位置.
原因
待续