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

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

About this issue

Original URL
State: open
Created 4 months ago
Comments: 16 (3 by maintainers)

Most upvoted comments

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.

eltigerchino on Mar 14, 2024

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

CEI-Devs on Mar 14, 2024

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 on Mar 12, 2024

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

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

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

farin on Mar 8, 2024

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

brenthoneybone on Feb 22, 2024