Laravel+Inertia+React+Vite构建后浏览器报错求助

核心问题分析 #

你的矛盾源于ESM与CommonJS模块系统的冲突：

• 开启"type": "module"后，Vite默认按ESM处理所有文件，但部分依赖（如部分第三方库或遗留代码）输出CommonJS格式，导致exports未定义、externalize-deps触发错误。
• 关闭"type": "module"后，Node.js默认按CommonJS处理，但laravel-vite-plugin是纯ESM模块，无法在CommonJS环境中被require，因此报错。

分步修复方案 #

1. 保留"type": "module"，修复CommonJS依赖兼容问题 #

保留package.json中的"type": "module"，针对CommonJS依赖的转换问题做以下调整：

调整vite.config.ts

移除冗余插件，改用Vite内置配置处理CommonJS依赖：

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.tsx',
            refresh: true,
        }),
        react(),
        legacy({
            targets: ['defaults', 'not IE 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
        }),
    ],
    optimizeDeps: {
        // 强制将CommonJS依赖转为ESM
        esbuildOptions: {
            loader: {
                '.js': 'jsx',
            },
            resolveExtensions: ['.js', '.jsx', '.ts', '.tsx'],
        },
        // 指定需要预构建的CommonJS依赖（按需添加报错的库）
        include: ['react-speech-recognition', 'react-countdown', 'rodal'],
    },
    resolve: {
        alias: {
            '@': '/resources/js',
        },
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
});

调整tsconfig.json

确保TypeScript配置与ESM兼容：

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "moduleResolution": "bundler",
        "jsx": "react-jsx",
        "rootDir": "./resources/js",
        "strict": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "allowSyntheticDefaultImports": true,
        "paths": {
            "@/*": ["./resources/js/*"]
        },
        "types": ["vite/client"]
    },
    "include": ["./resources/js/**/*"]
}

2. 清理冗余依赖 #

移除不必要的依赖以减少冲突：

npm uninstall vite-plugin-babel @rollup/plugin-replace @babel/plugin-transform-modules-commonjs vite-plugin-symfony

3. 验证修复 #

• 删除旧依赖文件：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

• 启动开发服务器：

  npm run dev
  

临时备选方案 #

如果上述方案无效，可尝试在保留"type": "module"的前提下兼容laravel-vite-plugin（不推荐长期使用）：
在vite.config.ts顶部添加：

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const laravel = require('laravel-vite-plugin').default;

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