Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clicking on a link before JS finishes loading breaks navigation #652

Closed
pablo-abc opened this issue Mar 25, 2021 · 1 comment · Fixed by #654
Closed

Clicking on a link before JS finishes loading breaks navigation #652

pablo-abc opened this issue Mar 25, 2021 · 1 comment · Fixed by #654

Comments

@pablo-abc
Copy link

pablo-abc commented Mar 25, 2021

Describe the bug
If the user clicks on an internal link before the JS of the page finishes loading, the route changes but Svelte never navigates to the page. An Uncaught Promise is thrown in the logs with the message: TypeError: can't access property "path", this.current.page is null. This only happens consistently in production. I didn't manage to reproduce it in https://kit.svelte.dev at all, but I did manage to reproduce it consistently in my site which uses adapter-static.

Logs

Uncaught (in promise) TypeError: can't access property "path", this.current.page is null
    notify https://felte.dev/_app/start-66c1f370.js:1
    _navigate https://felte.dev/_app/start-66c1f370.js:1
    init https://felte.dev/_app/start-66c1f370.js:1
    init https://felte.dev/_app/start-66c1f370.js:1
    bt https://felte.dev/_app/start-66c1f370.js:1
    <anonymous> https://felte.dev/:32

To Reproduce
In the browser (e.g. Firefox) set throttling to Regular 2G (or something slow enough for you to click an internal link before JS finishes loading) and click the link. The URL should change to the appropriate value but the page never changes. An error is thrown in the console. I haven't managed to reproduce it consistently on a local environment, just on the production site. Using svelte-kit build && svelte-kit start does make the bug appear but rarely.

Screen.Recording.2021-03-25.at.01.58.53.mov

Expected behavior
Clicking a link before JS loads should work as clicking a link in a page without JS at all.

Stacktraces
No stack trace.

Information about your SvelteKit Installation:

 System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Memory: 98.43 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.volta/tools/image/node/14.16.0/bin/node
    Yarn: 1.22.10 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn
    npm: 7.5.4 - ~/.volta/tools/image/npm/7.5.4/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox Developer Edition: 87.0
    Safari: 14.0.3
  npmPackages:
    @sveltejs/kit: 1.0.0-next.58 => 1.0.0-next.58
    svelte: ^3.0.0 => 3.35.0
  • Tested in Firefox Developer Edition 87.0

  • Adapter: static

Severity
Might block users with slow connections since the site will feel broken to them.

Additional context
I had a similar issue with sites built using sapper export as well.

@Rich-Harris
Copy link
Member

Thanks — opened #654

Rich-Harris pushed a commit that referenced this issue Mar 25, 2021
* hydrate initial page before starting router - fixes #652

* changeset
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants