Yarn工作区中Vite导入shared包Enum失败的解决方法

1. 修正shared包的package.json配置 #

Vite需要明确的包导出规则才能识别工作区子包的文件，在packages/shared/package.json中补充exports字段，同时完善入口配置：

{
  "name": "@my-package/shared",
  "private": false,
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./src/TimeRange": {
      "import": "./src/TimeRange.ts",
      "types": "./src/TimeRange.ts"
    }
  },
  "scripts": {
    "build": "tsc"
  }
}

• exports字段明确声明了包内可被外部导入的路径，告诉Vite./src/TimeRange.ts是合法的导入目标
• 若不需要构建产物直接导入源码，需在exports中指定源码文件的导入规则

2. 配置Vite的依赖预构建与路径解析 #

在前端项目的vite.config.ts中添加以下配置，强制Vite将shared包纳入预构建范围：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      // 可选：简化导入路径，避免写冗长的src路径
      '@my-package/shared': path.resolve(__dirname, '../shared')
    }
  },
  optimizeDeps: {
    // 强制Vite预构建shared包，确保文件进入.vite/deps目录
    include: ['@my-package/shared']
  }
});

3. 确保shared包的TS配置正确 #

在packages/shared/tsconfig.json中设置符合Vite要求的编译选项：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "NodeNext"
  },
  "include": ["src/**/*"]
}

4. 验证导出与导入的匹配性 #

检查shared/src/TimeRange.ts的导出方式：

enum TimeRange {
  // 你的枚举定义示例
  DAY = 'day',
  WEEK = 'week'
}

export default TimeRange;

前端导入时确保路径与exports配置一致：

// 使用完整src路径导入
import TimeRange from '@my-package/shared/src/TimeRange';

5. 重新链接工作区依赖 #

执行以下命令确保Yarn正确链接工作区子包：

yarn install

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