I'm having trouble with hot-reloading a library in a monorepo using Vite.
My basic repo structure is
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
I setup a StackBlitz project here for a more complete picture, but here is my Vite config.
// 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]'
}
}
}
});
Simple changes seem to work fine when I run pnpm dev, but when I add a new component to my packages/ui/components folder, as soon as I export that new component in my index.ts file, I get an error that the component could not be found.
packages/ui/src/index.ts
import "./index.css"
export * from "./components/Button" <-- changes to this file trigger HMR as expected
export * from "./components/Foo" <-- this newly added component triggers the error
Error:
[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 |
Is this expected behavior or am I missing something in either the Vite config or my tsconfig? Is it necessary to rerun pnpm dev each time a new component is added to the ui package?