Laravel+Vite+React项目TypeScript接口报错及后续问题求助

1. 解决"Unexpected reserved word 'interface'"报错 #

这个错的根源是：Vite在开发模式下，默认不会把.js/.jsx文件当作TypeScript解析，但生产构建时Laravel的Vite配置可能自动开启了TS处理逻辑，所以build能过dev报错。

解决办法：

• 纯类型定义文件（比如只写interface、type）直接用.ts后缀，别混在JS/JSX文件里
• React组件文件统一用.tsx后缀，让Vite按TSX规则解析

2. 解决"'React' refers to a UMD global"报错 #

这是TS配置没适配React 17+的自动JSX转换导致的，根本不需要手动import React。

修改项目根目录的tsconfig.json：

{
  "compilerOptions": {
    // 保留其他配置，修改这两项
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

改完之后，.tsx文件里不用再写import React from 'react'，TS会自动处理JSX的React依赖。

3. 解决console.log触发两次的问题 #

这是React Strict Mode的正常操作——开发模式下Strict Mode会重复执行渲染、副作用函数（比如useEffect），目的是帮你排查未清理的副作用，生产环境不会有这个情况。

两种处理方式：

• 开发阶段接受这个现象，毕竟是调试用的机制，不影响功能
• 去掉入口文件里的<React.StrictMode>包裹，比如在resources/js/app.tsx里：

  // 原来的代码
  ReactDOM.createRoot(document.getElementById('app')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  
  // 修改后
  ReactDOM.createRoot(document.getElementById('app')).render(
    <App />
  );
  

额外配置检查 #

确保你的vite.config.js配置正确：

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

export default defineConfig({
  plugins: [
    laravel({
      input: 'resources/js/app.tsx',
      refresh: true,
    }),
    react(),
  ],
});

同时确认package.json里装了必要依赖：

{
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "laravel-vite-plugin": "^0.7.0",
    "typescript": "^5.0.0",
    "vite": "^4.0.0"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

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