Custom root folder destroys hmr css update (svelte + vite + ubuntu)

[robindanzinger]

Describe the bug

I have a custom root folder (e.g. /custom/) where I put the entry index.html and index.js. They are referencing the svelte app, which is placed inside /src folder.

In the vite-config file I add the root property with value 'custom'.

When I start the dev server, everything works fine, but when I change the css inside App.svelte, the css is destroyed.

This happens in ubuntu, but I couldn't reproduce it with MacOs or Windows. So I would be happy, if someone can confirm this bug using ubuntu.

Unfortunately I need to put the index.html in another folder, because it's a multi-app-project and the index.html in the project folder is already used for another app.

Reproduction URL

https://github.com/robindanzinger/svelte_bug_custom_root

Reproduction

Unfortunately I can reproduce it only with ubuntu (different versions).

1) Checkout the github project 2) run npm install 3) run dev server npm run dev 4) open browser 5) open file src/App.svelte in favorite editor 6) change the background-color to something else

Result: Backgound-color should be updated in browser, but disappears.

Logs

browser:
no logs

server log:
11:18:54 [vite] hmr update /@fs/home/vite-svelte/src/App.svelte, /@fs/home/vite-svelte/src/App.svelte?svelte&type=style&lang.css
  vite:load 2.50ms [fs] ../src/App.svelte?svelte&type=style&lang.css +35s
  vite:hmr [self-accepts] /home/vite-svelte/src/App.svelte?svelte&type=style&lang.css +35s
  vite:import-analysis 0.35ms [0 imports rewritten] /home/vite-svelte/src/App.svelte?svelte&type=style&lang.css +35s
  vite:transform 1.25ms ../src/App.svelte?svelte&type=style&lang.css +35s
  vite:time 6.43ms ../src/App.svelte?svelte&type=style&lang.css +34s
  vite:load 4.72ms [fs] ../src/App.svelte +4ms
  vite:cache [memory] /home/vite-svelte/src/App.svelte?svelte&type=style&lang.css +34s
  vite:cache [memory] ../node_modules/svelte-hmr/runtime/hot-api-esm.js?v=9b053e16 +1ms
  vite:cache [memory] ../node_modules/svelte-hmr/runtime/proxy-adapter-dom.js?v=9b053e16 +0ms
  vite:cache [memory] ../node_modules/.vite/deps/svelte_internal.js?v=1125162b +0ms
  vite:cache [memory] ../node_modules/.vite/deps/svelte_internal_disclose-version.js?v=1125162b +0ms
  vite:hmr [accepts-exports] /home/vite-svelte/src/App.svelte +47ms
  vite:import-analysis 6.03ms [5 imports rewritten] /home/vite-svelte/src/App.svelte +47ms
  vite:transform 44.06ms ../src/App.svelte +46ms
  vite:time 51.69ms ../src/App.svelte +47ms
  vite:cache [memory] /home/vite-svelte/src/App.svelte?svelte&type=style&lang.css +10ms
  vite:time 0.70ms /home/vite-svelte/src/App.svelte?svelte&type=style&lang.css +9ms

System Info

System:
    OS: Linux 5.14 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics
    Memory: 24.16 GB / 30.63 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.15.1 - /usr/local/bin/node
    npm: 10.7.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 127.1.68.137
    Chromium: 127.0.6533.99
  npmPackages:
    svelte: ^4.2.18 => 4.2.18

[dominikg]

can't reproduce this in stackblitz or linux (manjaro, arch based).

Does your home path include any special characters or are there other customizations on your fs that could impede the watcher?

In the browser, there is a websocket for the vite client, can you check what messages are sent there when you edit the file?

[robindanzinger]

When I change the css, then the browser requests the url http://localhost:5173/home/vite-svelte/src/App.svelte?t=1724318957374&svelte&type=style&lang.css

And the response is:

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/@fs/home/vite-svelte/src/App.svelte?svelte&type=style&lang.css");
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "/home/vite-svelte/src/App.svelte?svelte&type=style&lang.css"
const __vite__css = "<script>\n</script>\n\n<div class=\"custom\">this is custom, run dev server, changte the background-color to red or green.</div>\n<div class=\"custom\">It should change background color, but it doesn't work on ubuntu</div>\n<div class=\"custom\">Restart dev server. Now background-color is ok. Until you change the color again.</div>\n\n<style>\n.custom {\n  background-color: red;  \n  /* background-color: red; */\n}\n\n</style>\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

the const vitecss contains the whole svelte file, but it should contain only the css part. When I restart the server I get for the request: http://localhost:5173/@fs/home/vite-svelte/src/App.svelte?svelte&type=style&lang.css

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/@fs/home/vite-svelte/src/App.svelte?svelte&type=style&lang.css");
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "/home/vite-svelte/src/App.svelte?svelte&type=style&lang.css"
const __vite__css = ".custom.s-_ndbGLWBsHAX{background-color:red}.s-_ndbGLWBsHAX{}"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

[robindanzinger]

I can reproduce it only with ubuntu but on different devices. I have no customizations on ubuntu. Tried it on a new installed ubuntu version. Interesting thing is, that when I don't use a custom folder, then everything works fine.

[dominikg]

So if the content of vitecss is the whole .svelte file, it looks like that request was not transformed by v-p-s. I am still at a loss why this would only happen on ubuntu specifically though

[dominikg]

does the same happen if you use vue? or vanilla vite? npm create vite@latest

[robindanzinger]

In vue, I have to save the file twice, before it updates. But the css is correct.

[robindanzinger]

hmm, will check, if I can reproduce it on another device / different native linux version, and then post here again. Or maybe someone in the svelte community uses ubuntu and can confirm the bug. I'm mostly offline the next days, so it will take some time. Thank you so far for your very quick response and help!

[dominikg]

Is this inside a container or are you using a network fs? Did you edit the paths in your report in any way? no username in /home confuses me a bit, or is this containerized and you run the project in the users home directory?

can you run DEBUG=* vite dev and post it here? there should be logs from vite-plugin-svelte regarding the hmr update. If not that shows that the edit does not reach it for some reason.

[dominikg]

there is https://github.com/vitejs/vite/issues/16481 but thats more about a possible root relative path confusion, you don't happen to have /custom elsewhere?

[robindanzinger]

Yes, I edited the path. Now moved the project it the home/robin .

12:21:18 [vite] hmr update /@fs/home/robin/vite-svelte/src/App.svelte, /@fs/home/robin/vite-svelte/src/App.svelte?svelte&type=style&lang.css
  vite:load 3.11ms [fs] ../src/App.svelte?svelte&type=style&lang.css +11s
  vite:hmr [self-accepts] /home/robin/vite-svelte/src/App.svelte?svelte&type=style&lang.css +11s
  vite:import-analysis 0.29ms [0 imports rewritten] /home/robin/vite-svelte/src/App.svelte?svelte&type=style&lang.css +11s
  vite:transform 1.02ms ../src/App.svelte?svelte&type=style&lang.css +11s
  vite:time 3.94ms ../src/App.svelte?svelte&type=style&lang.css +7s
  vite:time 6.56ms ../src/App.svelte?svelte&type=style&lang.css +1ms
  vite:load 4.45ms [fs] ../src/App.svelte +4ms
  vite:cache [memory] /home/robin/vite-svelte/src/App.svelte?svelte&type=style&lang.css +7s
  vite:cache [memory] ../node_modules/svelte-hmr/runtime/hot-api-esm.js?v=09d42675 +1ms
  vite:cache [memory] ../node_modules/svelte-hmr/runtime/proxy-adapter-dom.js?v=09d42675 +0ms
  vite:cache [memory] ../node_modules/.vite/deps/svelte_internal.js?v=5ef0d121 +0ms
  vite:cache [memory] ../node_modules/.vite/deps/svelte_internal_disclose-version.js?v=5ef0d121 +1ms
  vite:hmr [accepts-exports] /home/robin/vite-svelte/src/App.svelte +38ms
  vite:import-analysis 5.18ms [5 imports rewritten] /home/robin/vite-svelte/src/App.svelte +38ms
  vite:transform 34.74ms ../src/App.svelte +37ms
  vite:time 41.13ms ../src/App.svelte +38ms
  vite:time 42.28ms ../src/App.svelte +0ms
  vite:cache [memory] /home/robin/vite-svelte/src/App.svelte?svelte&type=style&lang.css +10ms
  vite:time 0.68ms /home/robin/vite-svelte/src/App.svelte?svelte&type=style&lang.css +8ms
  vite:cache [memory] /home/robin/vite-svelte/src/App.svelte?svelte&type=style&lang.css +1ms
  vite:time 0.39ms /home/robin/vite-svelte/src/App.svelte?svelte&type=style&lang.css +2ms

[robindanzinger]

Somehow the problem occurs when the svelte file is not inside the custom root folder. When I put the App.svelte inside custom, everything works fine. When I put the App.svelte inside project root or in src folder (import via '../' or '../src') then the update doesn't work any more.