Vite Monorepo中UI库新增组件热重载失败求助

项目基础结构 #

repo/
├── apps/
│   └── web/
│       ├── src/
│       │   └── App.tsx
│       ├── tsconfig.json
│       └── vite.config.ts
└── packages/
    ├── eslint-config
    ├── typescript-config
    └── ui/
        ├── src/
        │   ├── components/
        │   │   └── Button.tsx
        │   └── index.ts
        └── vite.config.ts

Vite配置 #

apps/web/vite.config.ts #

import { resolve } from "path";
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths()
  ],
  resolve: {
    alias: {
      "@repo/ui": resolve(__dirname, "../../packages/ui/src")
    },
  },
})

packages/ui/vite.config.ts #

import { resolve } from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    plugins: [
        tsconfigPaths(),
        react(),
        dts({
            entryRoot: resolve(__dirname, "src"),
            insertTypesEntry: true
        })
    ],
    build: {
        outDir: "dist",
        emptyOutDir: true,
        lib: {
            entry: resolve(__dirname, "src/index.ts"),
            name: "@repo/ui",
            formats: ['es'],
            fileName: (format) => `index.${format}.js`
        },
        rollupOptions: {
            external: ["react", "react-dom", "react-jsx"],
            output: {
                assetFileNames: 'index-foo.[ext]'
            }
        }
    }
});

问题现象 #

运行pnpm dev时，修改现有组件（比如Button.tsx）的热重载正常，但在packages/ui/components文件夹新增组件（比如Foo.tsx）后，在index.ts中导出该组件时会出现找不到文件的错误：

变更后的index.ts #

import "./index.css"

export * from "./components/Button" // 此文件变更可正常触发HMR
export * from "./components/Foo"    // 新增组件触发错误

错误信息 #

[plugin:vite:import-analysis] Failed to resolve import "./components/Foo" from "../../packages/ui/src/index.ts". Does the file exist?
/home/emfrick/turborepo-with-vite-react-tailwind/packages/ui/src/index.ts:4:14
1  |  import "./index.css";
2  |  export * from "./components/Button";
3  |  export * from "./components/Foo";
   |                 ^
4  |

疑问 #

这是预期行为吗？还是我在Vite配置或tsconfig中遗漏了什么？每次新增UI组件都需要重新运行pnpm dev吗？

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