Vite+React+TS项目使用npm link引入本地包dev环境报错如何解决？

核心问题是自定义TS包的入口配置缺失 + 本地npm link流程未触发产物编译，具体如下：

• my-package的package.json未声明任何入口字段（main/module/types/exports），Vite开发服务器解析依赖时无法定位入口文件
• my-package的tsconfig.json未指定编译产物输出目录，且prepack钩子仅在执行npm publish/npm pack时触发，本地npm link流程不会自动执行TS编译，link的包里没有可执行的JS产物
• Vite配置中optimizeDeps.exclude排除了my-package的预构建，进一步放大了入口解析异常的问题

1. 修正my-package的tsconfig配置 #

修改my-package/tsconfig.json，明确指定编译产物输出目录和模块解析规则：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "declaration": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "ESNext",
    "outDir": "./dist"
  },
  "include": ["*.ts"]
}

2. 补充my-package的package.json入口配置 #

修改my-package/package.json，新增入口字段和本地编译脚本：

{
  "name": "my-package",
  "description": "my-package",
  "license": "UNLICENSED",
  "version": "1.0.3",
  "type": "module",
  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "devDependencies": {
    "@types/node": "16.11.11",
    "ts-node": "10.4.0",
    "typescript": "4.5.2"
  },
  "scripts": {
    "build": "tsc",
    "prepack": "tsc"
  }
}

3. 执行正确的npm link流程 #

• 进入my-package根目录，执行npm run build编译生成dist目录下的JS产物和TS类型文件
• 执行npm link注册全局软链
• 进入React应用根目录，执行npm link my-package关联本地包

4. 调整Vite配置（可选） #

如果仍有入口解析异常，删除vite.config.ts中optimizeDeps.exclude里的my-package，允许Vite对依赖做预构建：

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

export default defineConfig({
  build:        { outDir: "dist" },
  // 移除my-package的exclude配置
  optimizeDeps: {},
  plugins:      [react()],
  resolve:      { dedupe: ["my-package"] },
  server:       { hmr: { overlay: false } }
});

5. 验证修复 #

删除React应用的node_modules/.vite缓存目录，重新执行npm run dev即可正常启动。

后续修改my-package源码后，需要重新在my-package目录执行npm run build编译，React应用才能拿到最新的产物；如果需要实时同步修改，可在my-package目录单独启动tsc --watch进程自动编译。

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