Monorepo中Vite构建共享包时Mantine主题类型导出失败

将现有仓库重构为Monorepo，拆分出components、theming、test-utils等共享包，技术栈为Vite + Turborepo，使用vite-plugin-dts生成类型定义。在基于Mantine开发的theming包中遇到以下问题：

• Vite构建完成后，dist目录下的theme/index.d.ts无任何导出声明
• 主应用导入theming包并尝试引用theme时，TypeScript提示该导出不存在
• 但构建生成的index.mjs文件中已正确包含theme对象的JS导出

项目结构 #

repo/
└── packages/
    └── theming/
        ├── src/
        │   ├── colors/
        │   │   ├── colors.tsx
        │   │   ├── helpers.tsx
        │   │   └── index.ts
        │   └── theme/
        │       ├── theme.tsx
        │       └── index.ts
        ├── vite.config.ts
        └── tsconfig.ts

Vite配置 (vite.config.ts) #

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

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      formats: ["es"],
      fileName: "index",
    },
    rollupOptions: {
      external: [
        "react",
        "react-dom",
        "react/jsx-runtime",
        "@***/ui",
        "@mantine/core",
        "@mantine/hooks",
      ],
    },
  },
  plugins: [dts({ include: "src" }), react()],
});

TypeScript配置 (tsconfig.json) #

{
  "compilerOptions": {
    "types": ["node", "vitest/globals"],
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "preserveSymlinks": true,
    "typeRoots": ["node_modules/@mantine", "node_modules/@types"]
  },
  "include": ["src"]
}

theme核心代码 (src/theme/theme.tsx) #

import { createTheme } from '@mantine/core';
import { variantColorResolver } from './xxx'; // 假设已正确引入

export const theme = createTheme({
  variantColorResolver,
  spacing: {
    xxs: "4px",
    xs: "8px",
    sm: "12px",
    md: "16px",
    lg: "24px",
    xl: "32px",
    xxl: "40px",
  },
  fontFamily: "General Sans, sans-serif",

  lineHeights: {
    xs: "16px",
    sm: "18px",
    md: "22px",
    lg: "24px",
    xl: "26px",
  }
});

构建后dist目录结构 #

repo/
└── packages/
    └── theming/
        ├── dist/
        │   ├── colors/
        │   │   ├── colors.d.ts
        │   │   ├── helpers.d.ts
        │   │   └── index.d.ts
        │   └── theme/
        │       └── index.d.ts
        ├── index.d.ts
        └── index.mjs

构建后的JS导出 (index.mjs) #

export {
  xa as GetName,
  wa as ThemedMantineProvider,
  Le as alterHslStringLightness,
  bn as colorPalette,
  $ as displayModes,
  A as fillRemainingShades,
  ya as getResolvedColors,
  ve as isInDisplayMode,
  la as theme,
  ha as useDisplayMode,
  gn as useMediaQueryValue,
  pn as variantColorResolver
};

修复方案 #

1. 检查导出链完整性 #

首先确认以下文件的导出是否正确：

• src/theme/index.ts必须导出theme：

  // src/theme/index.ts
  export { theme } from './theme.tsx';
  

• 根入口src/index.ts必须导出theme模块的内容：

  // src/index.ts
  export * from './theme';
  export * from './colors';
  // 其他需要导出的模块...
  

如果导出链断裂，vite-plugin-dts无法识别需要生成的类型导出。

2. 调整vite-plugin-dts配置 #

启用rollupTypes选项，让插件基于Rollup打包后的模块结构生成类型定义，避免源文件扫描的遗漏：

// vite.config.ts
plugins: [
  dts({ 
    include: "src",
    rollupTypes: true // 新增配置
  }), 
  react()
],

3. 清理缓存后重新构建 #

执行以下命令清理Turbo和Vite缓存，避免旧文件干扰：

turbo clean
# 根据你的包管理器选择对应命令
pnpm install # 或 npm install / yarn install
turbo build

4. 检查TS配置冲突 #

确保tsconfig.json中的isolatedModules为true（与Vite的要求一致），同时noEmit不会影响vite-plugin-dts的类型生成，无需修改。

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