Svelte HMR fails to reload page on Windows

[asv7c2]

Describe the bug
SvelteKit fails to reload page when navigate to page through address bar.

Logs

Failed to load resource: the server responded with a status of 404 (Not Found)
client:190 [hmr] Failed to reload D:\Dev\test\src\routes\page.svelte. This could be due to syntax errors or importing non-existent modules. (see errors above)

To Reproduce

1. npm init svelte@next
2. create any page in routes (ex. page.svelte)
3. navigate to this page through address bar
4. try modify page.svelte content
5. sveltekit throws error 404 and page is not refresh / reloading.

I am using windows. Maybe it only windows related issue. Someone need check on other os.

Expected behavior

Stacktraces
Information about your SvelteKit Installation:

Severity

Additional context

[benmccann]

There's not enough info here to reproduce your error. E.g. what did you put in page.svelte?

Have you read the section about fallthrough routes? I wonder if that might be why you're seeing a 404. https://kit.svelte.dev/docs#routing-advanced-fallthrough-routes

[asv7c2]

@benmccann
repo

steps:

1. npm run dev
2. open localhost:3000 (it must be opened first)
3. now in address bar enter localhost:3000/page
4. try modify page.svelte content
5. 404 error in console (hmr failed to update page)

If you go through link on index page, there no error will be.

[rmunn]

Ran your https://github.com/asv1/svelte_bug_3 reproduction and followed those steps, and the HMR worked for me. I made sure to run "npm run dev" and open localhost:3000 first, and then type localhost:3000/page into the address bar. Then I edited page.svelte in VS Code and saved it, and when I looked back at my browser tab the new contents were there, with a message in the console that HMR had updated.

So I can't reproduce this with the repro in #871 (comment)

[pilt]

First, thanks for Svelte kit!

I'm seeing the same thing on Windows.

On routes/index.ts it works. The HMR websocket (?) receives

{"type":"update","updates":[{"type":"js-update","timestamp":1617691304457,"path":"/src/routes/index.svelte","acceptedPath":"/src/routes/index.svelte"}]}

followed by the browser fetching http://localhost:3000/src/routes/index.svelte?import=&t=1617691793176 and a 200 OK response.

If I change a custom route in routes/admin.svelte, visit /admin in the browser and make a change the websocket receives

{"type":"update","updates":[{"type":"js-update","timestamp":1617691416531,"path":"C:\\Users\\SUBPATH_HERE\\src\\routes\\admin.svelte","acceptedPath":"C:\\Users\\SUBPATH_HERE\\src\\routes\\admin.svelte"}]}

followed by a GET on http://localhost:3000/:/Users/SUBPATH_HERE/src/routes/admin.svelte?import&t=1617691416531 that 404s.

My guess is that the refresh path sent to the browser should be relative and that the component responsible for making paths relative is broken somehow. I presume there is special handling for index.svelte as it attaches to / versus other paths that attach to their relative path excluding extension (admin.svelte at /admin) but this is also a guess.

[rmunn]

My failure to reproduce was on Linux, so I think it's a Windows-only thing. The /:/ part of the URL that starts with http://localhost:3000/:/Users/ looks like an invalid URL to me, and is probably what's causing the 404. So the thing to figure out is why/how that invalid URL is being constructed.

[DrewRidley]

Interestingly I had a similar issue but it was solved through to use of optimizeDeps: Object.keys(pkg.dependencies) in your config under vite. Other users on the discord who encountered a similar error also said that this fixed it for them, though im not entirely sure how or why it fixes it. It cant hurt to give it a try.

[benmccann]

@Asv1 could you confirm if you're running on Windows? (this is exactly why we ask users to provide the output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers in the issue template. It's a bit annoying that you didn't bother to fill it out)

[asv7c2]

@benmccann

  System:
    OS: Windows 10 10.0.17763
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 12.91 GB / 15.93 GB
  Binaries:
    Node: 14.16.0 - d:\portable\node\node.EXE
    npm: 6.14.11 - d:\portable\node\npm.CMD
  Browsers:
    Internet Explorer: 11.0.17763.771
  npmPackages:
    @sveltejs/kit: ^1.0.0-next.64 => 1.0.0-next.71
    svelte: ^3.36.0 => 3.37.0
    vite: ^2.1.4 => 2.1.5

[DrewRidley]

My solution I used last time no longer seems to work and I have the same bug. Any further investigations would be appreciated.

This screenshot is indicative of some weird path combining, where it tries to combine the local path with the server route. Very strange.

[bailletced]

System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 917.75 MB / 15.84 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE      
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Edge: Spartan (44.19041.1.0)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.71
    svelte: ^3.29.0 => 3.37.0
    vite: ^2.1.0 => 2.1.5

Adding optimizeDeps: Object.keys(pkg.dependencies || {}) in the config under vite solved the issue for me.

[GrygrFlzr]

@bailletced both kit and vite are quite outdated in your example, can you still replicate the issue on @sveltejs/kit 1.0.0-next.93 and vite 2.2.3?

[bailletced]

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 722.20 MB / 15.84 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE      
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1.0)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @sveltejs/kit: ^1.0.0-next.93 => 1.0.0-next.93
    svelte: ^3.29.0 => 3.37.0
    vite: ^2.2.3 => 2.2.3

I can still replicate the issue.
From what I am noticing, if I run npm run dev on a already opened page, it will be reloaded by the HMR. However, all the other ones will trigger a 404 error.
If no page are opened, only the main index page will be refreshed by the HMR.
It might seems kinda weird by this is what I am noticing.

[jasonlyu123]

The problem I encounter is mostly with route components. Most consistently reproducible with those [slug].svelte routes.

Don't know if this is the core cause. But when I replace the url with id in these two lines

kit/packages/kit/src/core/dev/index.js

Lines 197 to 198 in d965557

	const module = /** @type {SSRComponent} */ (await this.vite.ssrLoadModule(url));
	const node = await this.vite.moduleGraph.getModuleByUrl(url);

It seems to resolve the problem I encounter. The example on the documentation of vite also doesn't use the full system path with this method. Maybe vite doesn't handle the full system path in the method on windows very well.