How to fire HMR update when local dependency changes in monorepo

[maksimzinchuk]

I have a strange problem using vite in Vue 3 monorepo setup. I have several locally builded as library and linked to main app dependencies. Libraries are in commonjs format, with custom tsconfigs, package.json and other staff. While serving main app there is no HMR updates. What i'm doing wrong? Googled all over internet, but no luck

[imjordanxd]

I have this problem as well. I get a full page refresh

[IPWright83]

I'm having this problem too trying to get HMR working with a React project in a monorepo. I've seen this discussion (unfortunately it's locked) #1491 where @LinusBorg (hope you don't mind me tagging you - sorry if not!) managed to get this working for a Vue project.

I'm not quite sure what the magic part if as the package.json file for the library clearly references dist/es5/lib.umd.js as the main entry point, but that doesn't seem to be being used (in that if you modify it directly it doesn't trigger an HMR, but modifying the source file does without a build of the project).

I'm trying to work out how this works, and hopefully apply to my React project.

[Hecatron]

I recently ran into this problem and found a couple of approaches

Approach 1

You could run yarn build -w for each of the libraries in parallel to get an auto rebuild when they change

Approach 2

With this approach we tell vite to import from the neighbouring source which is probably better

vite config

The first thing is we add an alias to the vite / rollup settings within vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      'mylib' : path.resolve(__dirname, '../mylib/src/components/index.ts')
    },
  },
  plugins: [vue()]
})

This way when we do an import from mylib, it will use the source in the monorepo
instead of anything prebuilt such as a file in a dist directory referenced by the "main" or "module" tags in the library's package.json

The file we're referencing here ../mylib/src/components/index.ts is the same source entry point that would be used if the library was built in library mode via vite as an ES or UMD module.

tscondig

If you're using volar / vscode and want to pick up on any changes to types / auto completion we can also update tsconfig.json

Under tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "mylib": ["../mylib/src/components/index.ts"]
    }
    ...
  }
}

package config

For the package.json file, if you're using yarn workspaces.
Then you can add the dependency to the consuming project with a workspace reference like this

package.json

{
  "dependencies": {
    "mylib": "workspace:*"
  },
}

Other Examples

Looking at these links I think it suggests vite should already be doing this automatically?
But it doesn't seem to be from my point of view

• Help with monorepo #1491
• https://github.com/csr632/test-vite

I also tried this, but it didn't seem to work, maybe because I'm using windows

• https://github.com/aleclarson/vite-tsconfig-paths

I think in this example what he's doing is running multiple build tasks at the same time via vscode one for the library and one for the main app

• https://github.com/adiun/vite-monorepo

[Armadillidiid]

Thanks, man. The key thing for me was to set up an alias.

[kuubson]

One thing to make sure is to really avoid circular imports. This is what caused HMR not working for me.

Let's say I had a shared /hooks folder, and I was importing the useLoginForm hook into a Login.tsx component like this: import { useLoginForm } from 'hooks'. This hook was based on another shared hook called useForm.

These 2 files looked something like this:

// hooks/useForm.ts
import { useForm as useHookForm } from 'react-hook-form'

export const useForm = <TSchema extends z.ZodSchema>(schema: TSchema) => {
   return useHookForm<z.infer<typeof schema>>({ resolver: zodResolver(schema) })
}

Consider also the fact that I had an barrel index.ts file:

// hooks/index.ts
export { useForm } from './useForm'
export { useLoginForm } from './useLoginForm'

Now let's see what caused HMR not to work:

// hooks/useLoginForm.ts

1. import { useForm } from 'hooks' ❌ <~ This breaks HMR, saving this file causes the page to fully reload
2. import { useForm } from './' ❌ <~ This breaks HMR, saving this file causes the page to fully reload
3. import { useForm } from './useForm' ✔️ <~ This is the valid way, HMR kicks in on file save

const loginFormSchema = z.object({ email: z.string().email() })

export const useLoginForm = useForm(loginFormSchema)

Caveats regarding these 1 and 2 import cases mentioned above, but this time within the package's source code (let's say @custom-hooks):

The first one:

When configuring the package entry in vite.config.ts to use a built .mjs file (using tsup), it somehow allows for circular imports within the package. Once you import something from the package to your Vite project and through the package source code, you use the 1 and 2 way of importing, suprisingly, the HMR works fine.

Warning Please remember that this part pertains to circular imports specifically within the custom package itself. Be still cautious not to create circular imports within your Vite-related React/Vue/whatever frontend files.

// @custom-hooks/package.json
"scripts": {
   "lib:build": "tsup src/index.ts --format esm,cjs --dts --external react"
},

// vite.config.ts
export default defineConfig(() => ({
   resolve: {
      alias: {
         '@custom-hooks': '@custom-hooks/dist/index.mjs' 
      }
   },
}))

Use such .mjs entry when you don't want to be concerned about whether your package has circular imports or not. It doesn't matter. Importing anything from such a package into your Vite project will still make HMR work properly.

The second one:

When resolving the direct package entry file, the index.ts file, using the path.resolve, it does not allow circular imports within the package itself.

You can use this package reference whenever you want (I recommend the .mjs file approach), but make sure not to create circular imports within your package files. Importing something from this package, which has circular imports, into your Vite app will cause the HMR to stop working.

// vite.config.ts
export default defineConfig(() => ({
   resolve: {
      alias: {
         '@custom-hooks': path.resolve(__dirname, '../../@custom-hooks/src/index.ts') 
      }
   },
}))

[fabio-silva]

@kuubson did you advance on this? I have an issue with this too.
In my case, HMR gets triggered but the page doesn't reload 🤔

[pleek91]

One issue I'm having with this is even if I alias the dependency. Both projects alias @ to the root of the project. But since I've aliased the dependency when it tries to resolve aliases it ends up trying to import things from the root of the parent project rather than the dependency. I think I can use a customResolver to fix that, but struggling to figure that out. Anyone else here solved this?

[amritk]

If you switch to package.json based #imports instead of aliases I believe they will work fine