vite创建react项目并解决一系列报红

一、创建react项目

pnpm create vite

二、打开react项目

（一）模块 ""D:/xxx/node_modules/.pnpm/@types+react@18.2.64/node_modules/@types/react/ts5.0/index"" 只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入

src/main.tsx: 爆红

解决方案：添加“esModuleInterop”:true

{
    "compilerOptions":{
        /*Linting*/
        "esModuleInterop":true
    }
}

（二）在没有 "node" 模块解析策略的情况下，无法指定选项 "-resolveJsonModule"

tsconfig.json:(tsconfig.node.json同理)

解决：

 

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

解决：在vite-env.d.ts中添加

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

（四）找不到模块“path”或其相应的类型声明

解决：

pnpm install @types/node --save-dev

 最后：