Vite+React+pnpm Monorepo构建失败：'default'未导出错误解决

问题本质 #

这个错误是因为@react-aria/ssr的ESM模块（import.mjs）采用了import React from 'react'的默认导入写法，但React在ESM规范下仅提供具名导出（如import * as React from 'react'），Vite的Rollup打包阶段严格遵循ESM规范，因此抛出导出不存在的错误，和Vite issue#2679的核心原因一致。

可行解决方案 #

1. 在Vite配置中修复导入语法 #

修改vite.config.ts，通过Rollup插件手动替换@react-aria/ssr的导入语句，同时优化依赖预构建：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['@react-aria/ssr'],
    esbuildOptions: {
      loader: { '.mjs': 'js' },
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'fix-react-aria-ssr-imports',
          transform(code, id) {
            if (id.includes('@react-aria/ssr/dist/import.mjs')) {
              // 将默认导入替换为具名导入
              return code.replace(/import React from 'react'/g, "import * as React from 'react'");
            }
            return code;
          },
        },
      ],
    },
  },
});

2. 调整TypeScript编译选项适配 #

修改项目根目录或frontend包的tsconfig.json，开启合成默认导入支持：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "jsx": "react-jsx",
    "strict": true
  },
  "include": ["src/**/*"],
  "references": [{ "path": "../shared" }]
}

allowSyntheticDefaultImports会让TypeScript允许对无默认导出的模块使用默认导入语法，编译时自动转换为符合规范的具名导入。

3. 强制升级@react-aria/ssr到兼容版本 #

如果使用的@react-aria/ssr版本较旧，可能存在ESM导出适配问题，在项目根目录的package.json中添加pnpm overrides强制升级：

{
  "pnpm": {
    "overrides": {
      "@react-aria/ssr": "^3.9.0"
    }
  }
}

升级前可查看该库的CHANGELOG，确认目标版本已修复该导出问题。

验证流程 #

1. 执行pnpm install更新依赖
2. 清理缓存：pnpm cache clean && rm -rf node_modules/.vite
3. 重新运行vite build测试

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