Fast refresh not working with Vite + Docker + NPM workspaces configuration

[asgeo1]

Describe the bug

I have configured a setup with Vite + Docker + NPM Workspaces. Editing files within the Vite project works as expected, and fast refresh works to reflect the changes made.

However, I also have some "shared" code that is located outside of the main Vite project that I am managing with NPM workspaces. When I modify this shared code, it does not refresh in the browser. Even if I manually refresh the page, changes are never reflected.

So it's as if Vite is not watching that "shared" location. I'm not sure how to make it do that, and I've tried different settings under build.watch, server.watch to do so.

Curiously, if I remove Docker from the equation - so just use Vite + NPM workspaces - then the fast-refresh works as expected both within the Vite project, and outside in the "shared" location.

So it's very weird. Any ideas how to make Vite watch the "shared" code location? I feel like it must be a Vite watching issue, since fast-refresh otherwise works on Docker when working inside the project directory.

As a workaround, I can configure Vite "polling" and that seems to work OK - though obviously I would prefer the normal file-system events method to work.

Reproduction

https://github.com/asgeo1/demonstrate-vite-watching-issue

Steps to reproduce

1. Clone repo
2. docker compose up in the root.
3. Visit http://localhost:3000 in your browser. (project1)
4. Visit http://localhost:3001 in your browser. (project2)

As you make changes to project1/src/App.tsx or project2/src/App.tsx you should see those changes reflected in the respective browser page.

However, if you make changes to shared/src/utils.ts, you will only see those changes reflected in project2. It's not working in project1 due to some unknown issue.

(it only works in project2 due it using "polling" rather than file events)

---

Curiously, if you repeat all of the above steps locally, i.e. npm install in root locally, and then cd to each project and run with npm run dev - there is no issue and project1 will update as shared/src/utils.ts is modified

---

Docker notes:

• Make sure you have Docker Compose V2 installed. If you prefer Compose V1, a slight modification is needed to docker-compose.yml to remove name attribute.
• Also make sure you have VirtioFS configured in Docker settings (OSX)

System Info

From inside Docker container:

System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (5) arm64 unknown
    Memory: 14.17 GB / 15.61 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm

From the host:

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 3.14 GB / 64.00 GB
    Shell: 3.4.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.16.0 - ~/.nodenv/versions/18.16.0/bin/node
    npm: 9.5.1 - ~/.nodenv/versions/18.16.0/bin/npm
  Browsers:
    Brave Browser: 114.1.52.129
    Chrome: 114.0.5735.198
    Edge: 114.0.1823.67
    Safari: 16.5.1

Used Package Manager

npm

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.

[Shyam-Chen]

    volumes:
      - type: bind

[sapphi-red]

If polling works, I guess this is something related to Docker and chokidar or fsevents rather than Vite itself.

In your setup, node_modules is in a named volume and shared is a bind volume. So node_modules/shared would be a symlink from a named volume to a bind volume. My guess is that fsevents or inotify doesn't work in that scenario.

[raulcastillabravo]

This problem is related with this issue: microsoft/WSL#4739

I solved it by moving my project to WSL (Windows Subsystem for Linux) and running everything from there. I’m using React with Vite inside a Dev Container, and fast refresh is now working properly.

It seems the root cause is that inotify events are not shared between the host and the container.

I wrote an article on LinkedIn explaining the full process to fix it:: https://www.linkedin.com/pulse/desarrollar-en-linux-dev-containers-desde-windows-ra%C3%BAl-castilla-bravo-cjqaf