Vite+React+TS项目集成inversify时出现预转换错误求助

问题根源 #

你使用的@vitejs/plugin-react-swc基于SWC编译器，而SWC默认不会启用TypeScript装饰器语法支持——即便你在tsconfig.json中开启了experimentalDecorators，SWC也需要单独配置才能识别@injectable()这类装饰器语法，这才导致了“Expression expected”的预转换错误。

解决步骤 #

1. 配置SWC插件启用装饰器支持 #

修改vite.config.ts，给react-swc插件添加tsDecorators配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [
    react({
      tsDecorators: true, // 显式启用TypeScript装饰器支持
    }),
  ],
})

2. 确保导入reflect-metadata #

Inversify依赖reflect-metadata处理装饰器元数据，必须在项目入口文件（比如src/main.tsx）的最顶部导入它：

import 'reflect-metadata';
// 其他导入语句
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

3. 优化tsconfig配置（可选但推荐） #

虽然你已配置了必要的装饰器选项，但可以调整target和lib匹配现代环境，避免潜在兼容性问题：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"],
    "target": "ESNext", // 升级到ESNext，更好支持装饰器
    "lib": ["ESNext", "DOM"], // 适配React浏览器环境
    // 其余原有配置保持不变
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4. 重启Vite开发服务器 #

修改配置后必须重启Vite，确保新配置生效。

内容的提问来源于stack exchange，提问作者Mehdi Charife