reactjs - HMR de Monorepo con Vite
Tengo problemas con la recarga en caliente de una biblioteca en un monorepo usando Vite.
Mi estructura básica de repositorio es
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
He configurado un proyecto en StackBlitz aquí para tener una imagen más completa, pero aquí está mi configuración de 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]'
}
}
}
});
Los cambios simples parecen funcionar bien cuando ejecuto pnpm dev, pero cuando agrego un nuevo componente a mi carpeta packages/ui/components, tan pronto como exporto ese nuevo componente en mi archivo index.ts, obtengo un error de que no se pudo encontrar el componente.
packages/ui/src/index.tsimport "./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 |
¿Es este un comportamiento esperado o me falta algo en la configuración de Vite o en mi tsconfig? ¿Es necesario volver a ejecutar pnpm dev cada vez que se agrega un nuevo componente al paquete ui?