4.2.7: Browser back button does not go back (url changes but page does not change)

[gregg-cbs]

Describe the bug

On some pages when i click the browser back button the url changes but the page does not. This behaviour is intermittent which is even more strange. There are no errors being thrown in the browser or terminal.

Please see my screen recording below.

Reproduction

Its hard to give a repoduction on this when im not sure how it is happening

Logs

There are no errors or logs

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 15.23 GB / 31.92 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.3 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.0.1
    @sveltejs/kit: ^2.0.0 => 2.0.6
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1
    svelte: ^4.2.7 => 4.2.8
    vite: ^5.0.3 => 5.0.10

Severity

blocking an upgrade

Additional Information

Video recording of issue: https://github.com/sveltejs/kit/assets/57114335/d94ed7cb-2f50-439c-a953-68ade1bcca3f

[brenthoneybone]

I've just bumped into this same behavior.

  System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 38.67 GB / 62.50 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 21.6.0 - ~/.nvm/versions/node/v21.6.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.0/bin/npm
    pnpm: 8.12.1 - ~/.local/share/pnpm/pnpm
  Browsers:
    Brave Browser: beta
    Chrome: 122.0.6261.57
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.1 
    @sveltejs/adapter-static: ^3.0.1 => 3.0.1 
    @sveltejs/kit: ^2.0.0 => 2.5.0 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2 
    svelte: ^4.2.7 => 4.2.10 
    vite: ^5.0.3 => 5.1.1 

I can click through links and it works fine, clicking back will go back one page, then clicking any combination of forward/backward just updates the url and not the page content. I can then click a link on my page to go to another page and then I can click back and it works for one page and then repeats the same issue. No errors are shown from vite or the browser. Attached is a demo, sorry for the glitching graphics.

Note that beforeNavigate and onNavigate are also never called when it fails navigating between history states.

https://github.com/sveltejs/kit/assets/9443133/b648bcec-e69d-4daa-a62f-710d4af525b6

[Conduitry]

If anyone has a minimal reproduction, that would help immensely. There's not much to glean from a video of an app whose source we cannot see.

[joe-azps]

I have had this several times as well. A restart of the dev server fixes it if that helps point in the right direction.

[gregg-cbs]

nice @brenthoneybone - exactly what I experience. But i also experience it on production so if you have not deployed your app you can expect this issue to happen there as well.

i know of a few things that trip the router up. @brenthoneybone you have any ideas what could be causing your issues?

[brenthoneybone]

No idea, sorry, @gregg-cbs. I will try recreate the issue in a minimal reproduction soon. Had a busy week.

[farin]

I observe very issue when have NordPass extension enabled. Then following simple scenario happen on every Sveltekit based site eg

1. open https://kit.svelte.dev/
2. click read the docs
3. navigate back by browser back button
4. navigate forward by browser back button

• page is not changed although url changes there is some interaction between history listener and extension itself

[farin]

@Conduitry so case above could be minimal reproducible scenarion. It happen reproducibly event with sveltekit demo app.

[brenthoneybone]

@farin nice find. I too run Nordpass and I can confirm it seems to be Nordpass that creates the error. I can reproduce it everywhere with the extension and it seems to work fine without the extension. @Conduitry from my perspective this can probably be closed then as it seems to be nordpass rather than a svelte issue. @gregg-cbs do you also use the nordpass extension?

[farin]

It's question if NordPass is doing something nasty or SvelteKit observes history in some too fragile way. Even if it's bug on NordPass side it would be interesting find what's wrong and maybe SvelteKit can achieve same functionality in more robust way.

[gregg-cbs]

I do use nordpass but i dont have the browser extension installed. Only the desktop app.

Go to my site: https://bigtickets.co.za/

Click on the event "Summerdaze" and then go back and fourth between the 2 pages using the browser back and forward buttons and notice this issue. Tell me what happens for you please.

[CEI-Devs]

I do use nordpass but i dont have the browser extension installed. Only the desktop app.

Go to my site: https://bigtickets.co.za/

Click on the event "Summerdaze" and then go back and fourth between the 2 pages using the browser back and forward buttons and notice this issue. Tell me what happens for you please.

Can confirm, even on a addon-free browser it's not working properly

[eltigerchino]

I do use nordpass but i dont have the browser extension installed. Only the desktop app.

Go to my site: bigtickets.co.za

Click on the event "Summerdaze" and then go back and fourth between the 2 pages using the browser back and forward buttons and notice this issue. Tell me what happens for you please.

Again, a minimal repository that reproduces the issue is needed to find out the root cause.

[gregg-cbs]

I will need to try solved the issue and see where it is coming from. When I do that I will post here.

[gregg-cbs]

We narrowed it down to this code:

const urlParams = new URL(location.href);
urlParams.searchParams.delete('payment');
history.replaceState({}, document.title, urlParams.href); // <- this line

It seems history.replaceState with an empty object breaks routing.

If we change it to this it works:

history.replaceState(history.state, document.title, urlParams.href);

We could not get sveltes replaceState function to work, no matter how we configured it, it always threw an error so we are avoiding using it.

[CEI-Devs]

We narrowed it down to this code:

const urlParams = new URL(location.href);
urlParams.searchParams.delete('payment');
history.replaceState({}, document.title, urlParams.href); // <- this line

It seems history.replaceState with an empty object breaks routing.

If we change it to this it works:

history.replaceState(history.state, document.title, urlParams.href);

We could not get sveltes replaceState function to work, no matter how we configured it, it always threw an error so we are avoiding using it.

Can confirm, same problem with pushState too

[eltigerchino]

Please provide a minimal repository that shows how you are using the replaceState and pushState functions so that we can see exactly what error it throws.