关于使用vite创建react+typescript模板时，使用vscode爆红的配置修改_property 'div' does not exist on type 'jsx.intrins

作者：菜鸟追梦旅行 | 2024-02-20 11:13:22

踩

property 'div' does not exist on type 'jsx.intrinsicelements

出现问题

环境: 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配置的同级位置.

原因

待续

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/119668?site