Búsqueda de sitios web

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.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  |

¿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?

Artículos relacionados