Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hydration bug with browser extensions

See original GitHub issue

Describe the bug

https://limey.io is using SvelteKit, and many users are reporting that the site isn’t loading properly. It seems that hydration isn’t happening. In some very rare occurrences, it does hydrate.

The issue only happens with certain browser extensions, for example the BeaNote extension.

I’ve reproduced it on Netlify and CloudFlare Pages, but not locally.

Reproduction

Repo: https://github.com/probablykasper/sveltekit-hydration-bug

Deploy to Netlify or CloudFlare Pages
Install the BeaNote
Visit the deployed site

Logs

No response

System Info

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 396.21 MB / 32.00 GB
    Shell: 3.2.2 - /usr/local/bin/fish
  Binaries:
    Node: 16.13.1 - /var/folders/gs/3qcm1mc918s08sxvkj6zj2rr0000gp/T/fnm_multishells/39265_1649091675026/bin/node
    Yarn: 1.22.17 - /var/folders/gs/3qcm1mc918s08sxvkj6zj2rr0000gp/T/fnm_multishells/39265_1649091675026/bin/yarn
    npm: 8.1.2 - /var/folders/gs/3qcm1mc918s08sxvkj6zj2rr0000gp/T/fnm_multishells/39265_1649091675026/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Chrome: 99.0.4844.84
    Firefox: 98.0
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.29 => 1.0.0-next.29 
    @sveltejs/kit: ^1.0.0-next.303 => 1.0.0-next.304 
    svelte: ^3.46.6 => 3.46.6

Severity

blocking all usage of SvelteKit

Additional Information

No response

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

geoffrichcommented, Aug 25, 2022

Closed by #6245

1reaction

PH4NTOMikicommented, Apr 4, 2022

@probablykasper kinda related, you should also probably disable Rocket Loader (in the Cloudflare dashboard) for your page since it delays loading of the JS(at least until they rocket loader library loads) and since you are using SPA, you need JS for the page to be able to load, so it’s needless, and could actually break the page

Top Results From Across the Web

12:33 AM · Aug 28, 2022

Weirdest bug this week: iOS Safari renders long digits (e.g. 1111111111) as a telephone link that breaks hydration.

Hydrator – Get this Extension for Firefox (en-US)

Download Hydrator for Firefox. Hydrator reminds you to drink water with a preset time using simple browser notifications!

Google once again postpones Chrome extension overhaul ...

For several years, Google has been revising the way browser extensions work in Chrome and its open source Chromium foundation because the legacy ......

VisBug Tutorial - Rapidly Improve Layouts in the Browser

... from Scratch with my new service (coming soon) -- Today, we're going to take a look at a Google Chrome extension called...

BugHerd Browser Extensions

BugHerd offers browser extensions which provide the following functionality: Automatically add a screenshot to any BugHerd bug report...