HMR is not working with webapp in monorepo

[mkleszcz]

Describe the bug

The HMR is generating a 404 error when a React component is altered. This component originates from another package within the monorepo. This problem is limited to configurations that include the Tailwindcss plugin, although it may potentially affect other configurations. The issue also appears in instances where packages have been specifically named. For example, using 'webapp' as the root of the app and 'webapp-core' for shared components.

It seems the issue lies with the fileToDevUrl function, which contains the following condition:

} else if (id.startsWith(config.root)) {
    // in project root, infer short public path
    rtn = '/' + path.posix.relative(config.root, id)
  }

The condition 'webapp-core'.startsWith('webapp') === true causes the function to return a relative path that begins with /../. This portion is subsequently removed from the URL utilized to reload a component.

Reproduction

https://stackblitz.com/edit/vitejs-vite-ejez9c?file=packages%2Fwebapp-core%2Fsrc%2Ftest-component.tsx

Steps to reproduce

Run:

• pnpm i
• cd packages/webapp
• pnpm run dev

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.3 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.0.1 => 4.0.1 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-ejez9c (Open reproduction)

[hai-x]

I just tried it out and found that hmr works for me, if you are interested and have time, you can check the following repo.

https://github.com/haijie-x/vite-issues/tree/master/monorepo-hmr

In my opinion, there are 2 points that may need attention:

1. Reexport in webapp-core/index.tsx
2. Add webapp-core as a dependency of webapp, the version is startswith workspace

Not sure if I misunderstood you, but I hope this can help you.

[mkleszcz]

@haijie-x I checked your points and it turned out that they actually fixed my initial reproduction example. I also checked those things in my source project and there was still the same issue... I looked to it once again and prepared more advanced example that shows the issue:
https://stackblitz.com/edit/vitejs-vite-ejez9c?file=packages%2Fwebapp-libs%2Fwebapp-core%2Fsrc%2Fcomponents%2Ftest-component.tsx

I changed the structure of packages a bit, modified tsconfigs and added tailwind. This is basically 1:1 config that we have in SaaS Boilerplate repository where the issue exists.

Now you should see that when TestComponent is modified, in vite console there is a log:

22:22:00 [vite] hmr update /../webapp-libs/webapp-core/src/components/test-component.tsx, /src/index.css

and in browser dev console:

GET https://vitejsviteejez9c-fion-noyt1i3w--5173--e809191e.local-credentialless.webcontainer.io/webapp-libs/webapp-core/src/components/test-component.tsx?t=1689107486224 net::ERR_ABORTED 404 (Not Found)

[hmr] Failed to reload /../webapp-libs/webapp-core/src/components/test-component.tsx. This could be due to syntax errors or importing non-existent modules. (see errors above)

[tomelliot]

I'm experiencing the same issue. @mkleszcz did you find a resolution?

[sapphi-red]

This is fixed by #14241 in 4.4.10+.