React+TypeScript+Vite项目声明Interface报错求助

错误原因 #

你的Vite配置里错误设置了esbuild的loader规则，导致.tsx文件被当作普通JSX文件处理，而非TSX文件。esbuild无法识别TypeScript的interface语法，因此抛出"Expected ';' but found 'Props'"的错误。

具体问题出在vite.config.ts的两处配置：

• 全局esbuild.loader: 'jsx'强制所有文件用JSX loader解析
• optimizeDeps.esbuildOptions.loader里把.ts映射为tsx loader，干扰了正常的文件类型解析

解决方案 #

修改vite.config.ts，移除错误的loader配置：

修改前的配置：

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  esbuild: {
    loader: 'jsx', // 问题配置
  },
  root: './',
  build: {
    outDir: './build',
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
        '.ts': 'tsx', // 问题配置
      },
    },
  },
  plugins: [react(), tsconfigPaths()],
})

修改后的配置：

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  root: './',
  build: {
    outDir: './build',
  },
  plugins: [react(), tsconfigPaths()],
})

验证其他配置 #

你的组件代码和tsconfig.json配置是正常的：

• 组件里的interface Props语法符合TypeScript规范
• tsconfig.json的jsx: "react-jsx"设置正确，支持TSX文件的JSX语法

修改配置后，重启Vite开发服务器，错误应该会消失。

内容的提问来源于stack exchange，提问作者M. Usman Khilji