Vite Monorepo HMR

64 Views Asked by At

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?

0

There are 0 best solutions below