Skip to content

Hydration crashes in if branch for undefined data #15819

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

Open
kkarikos opened this issue Apr 22, 2025 · 4 comments
Open

Hydration crashes in if branch for undefined data #15819

kkarikos opened this issue Apr 22, 2025 · 4 comments

Comments

@kkarikos
Copy link

kkarikos commented Apr 22, 2025

Describe the bug

Hydration can crash at

hydrate_index = parseInt(data.substring(1));
because data is undefined.

When browser extension (or browser itself in some cases*) modifies the DOM content before the hydration executes, the value of data can become undefined. The result is that the whole page disappears which is unacceptable. Adding a check for undefined here fixes the issue but I am not certain what would be the desired value in this case.

*Safari WebView for example can detect some content as being telephone number and will modify it to become a link.

Reproduction

I created simple browser extension to modify #results of my application.

// manifest.json

{
  "manifest_version": 3,
  "name": "Localhost DOM Modifier",
  "version": "1.0",
  "description": "Modifies DOM for pages running on localhost",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["http://localhost/*"],
  "content_scripts": [
    {
      "matches": ["http://localhost/*"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ]
}

// content.js

window.addEventListener("load", function () {
  // Get #results container and add a test message as first child
  const resultsContainer = document.getElementById("results");
  const testMessage = document.createElement("div");
  testMessage.textContent = "TEST: This is a test message";
  resultsContainer.insertBefore(testMessage, resultsContainer.firstChild);
});

Logs

System Info

Binaries:
    Node: 20.17.0
    npm: 11.2.0
    pnpm: 9.11.0
  Browsers:
    Brave Browser: 135.1.77.100
    Chrome: 135.0.7049.95
  npmPackages:
    svelte: 5.28.2 => 5.28.

Severity

blocking all usage of svelte

@kkarikos
Copy link
Author

kkarikos commented Apr 23, 2025

I was looking few solutions and seems that just returning from the function in case the data is undefined fixes the issue.

...
if (data === undefined) {
  return;
}
hydrate_index = parseInt(data.substring(1));
...

I can do a PR but I am afraid I do not have the full understanding of the consequences this has. Anyways happy to help if possible as this is causing lot of headache for us in production at the moment.

edit: The "fixes the issue" is maybe bit of overstatement - the application does not crash but it removes the content that got injected by an extension. Ideally that would be left alone.

@jjones315
Copy link

Seeing this in Chrome 135.0.7049.115 too

@mado-opus
Copy link

I experience this error on Firefox137.0.1 and Chromium 135.0.7049.84, so I don't think it's a browser specific issue.

@kkarikos
Copy link
Author

From what I can tell it is not browser specific. What I meant about Safari WebView in the initial report was that this does not only occur with extensions injecting things into DOM - also browsers do that in some cases.

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

No branches or pull requests

4 participants