React项目从JavaScript迁移至TypeScript遇Vite配置错误求助

问题描述 #

将React项目从JS转为TS后，在index.ts中使用TypeScript类型断言：

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

Vite抛出esbuild解析错误：

[plugin:vite:esbuild] Transform failed with 1 error:
/var/www/remote/dashboard/src/index.ts:25:65: ERROR: Expected ")" but found "as"
/var/www/remote/dashboard/src/index.ts:25:65
Expected ")" but found "as"
23 |  
24 |  
25 |  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
   |                                                                   ^
26 |  
27 |  root.render(<RecoilRoot><App /></RecoilRoot>);

不使用TS语法时项目可正常运行。

问题根源 #

1. React插件转译范围限制：vite.config.ts中react插件的include仅指定了**/*.tsx，但index.ts是.ts扩展名，导致该文件的TS语法未被插件转译，esbuild将其当作普通JS解析，无法识别as断言。
2. 冗余loader配置冲突：optimizeDeps中把.ts文件指定为tsx loader，属于不必要的配置，可能引发解析逻辑冲突。

解决方案 #

修改vite.config.ts配置：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react({
        include: '**/*.{ts,tsx}' // 同时匹配.ts和.tsx文件，确保所有TS文件都被转译
    })],
    server: {
        port: 3000
    },
    optimizeDeps: {
        esbuildOptions: {
            loader: {
                ".js": "jsx",
                // 移除对.ts文件的loader配置，Vite会默认处理.ts扩展名
            },
        },
    },
});

额外验证 #

1. 确认tsconfig.json中的include字段为["src/**/*"]，确保所有src目录下的.ts/.tsx文件都被TS编译器处理。
2. 重启Vite开发服务器，此时as断言语法会被正确解析，报错消失。

内容的提问来源于stack exchange，提问作者Jud3v Digital