Failing to set `<svelte:head>` element with `getAttribute is not a function` #15337

hyunbinseo · 2025-02-19T03:59:18Z

Describe the bug

This Svelte code randomly causes the following issue:

Caution

Uncaught (in promise) TypeError: element2.getAttribute is not a function

<script>
  import logo from '$lib/logo.svg?no-inline';
</script>

<svelte:head>
  <link rel="icon" href={logo} />
</svelte:head>

<slot></slot>

Uncaught (in promise) TypeError: element2.getAttribute is not a function

  in +layout.svelte
  in root.svelte
    set_attribute attributes.js:154
    _layout +layout.svelte:48

/**
 * @param {Element} element
 * @param {string} attribute
 * @param {string | null} value
 * @param {boolean} [skip_warning]
 */
export function set_attribute(element, attribute, value, skip_warning) {
  // @ts-expect-error
  var attributes = (element.__attributes ??= {});

  if (hydrating) {
    attributes[attribute] = element.getAttribute(attribute); // here

function _layout($$anchor, $$props) {
  $.check_target(new.target);
  $.push($$props, true, _layout);

  var fragment_1 = $.comment();

  $.head(($$anchor) => {
    var fragment = root_1();
    var link = $.first_child(fragment);

    $.set_attribute(link, 'href', logo); // here

Reproduction

Failed to create a reproduction.

It suddenly happens without changing a single-line of code in an existing, working, error free code-base.

Attempt for debugging documented in this issue:

TypeError: element2.getAttribute is not a function #15336

Logs

System Info

System:
  OS: Windows 11 10.0.26100
  CPU: (8) x64 Intel(R) Core(TM) Ultra 7 258V
  Memory: 13.81 GB / 31.51 GB
Binaries:
  Node: 23.7.0 - ~\AppData\Local\fnm_multishells\6624_1739936373546\node.EXE
  npm: 10.9.2 - ~\AppData\Local\fnm_multishells\6624_1739936373546\npm.CMD
  pnpm: 10.4.0 - ~\AppData\Local\fnm_multishells\6624_1739936373546\pnpm.CMD
Browsers:
  Edge: Chromium (131.0.2903.112)

Severity

annoyance

The text was updated successfully, but these errors were encountered:

paoloricciuti · 2025-02-19T07:51:28Z

Especially if it happens seemingly randomly it's very important to provide a reproduction. I know it's hard but without a reproduction we would have no way to know if something else in your setup is causing this problem. At very minimum we need a repo where you know it could happen from time time, even better if you have a clear reproduction steps.

hyunbinseo · 2025-02-19T08:18:54Z

I've forgot to add the disclaimer from the previous issue. I know reproductions are important, I would have loved to create an MRE, but it was just impossible. This issue is more for documentation, hoping that someone else or future-self can benefit from. Will add one if viable.

Thanks for the comment. You can close both as off-topic if you desire.

paoloricciuti · 2025-02-19T08:25:09Z

I've forgot to add the disclaimer from the previous issue. I know reproductions are important, I would have loved to create an MRE, but it was just impossible. This issue is more for documentation, hoping that someone else or future-self can benefit from. Will add one if viable.

Thanks for the comment. You can close both as off-topic if you desire.

If the bug is there we need to fix it...we just need a jump start to not waste hours on something that might not be an issue.

gtm-nayan · 2025-02-20T18:26:40Z

@hyunbinseo some things that might help you narrow down the reproduction

Can you

place a breakpoint on that line check what kind of object element2 is
check the initial server rendered HTML with view-source: and see if there are any unexpected elements inside the head

hyunbinseo · 2025-02-21T03:07:20Z

element seems to be an empty #text node:

<!-- [ -->
<!-- seems to exist here in-between the comment and the link element -->
<link rel="icon" href="/src/lib/static/logo.svg?no-inline">

data: "\n"
firstChild: null
isConnected: true
lastChild: null
length: 1
nextElementSibling: link
nextSibling: link
nodeName: "#text"
nodeType: 3
nodeValue: "\n"
ownerDocument: HTMLDocument http://localhost:5173/blank
parentElement: head
parentNode: head
previousElementSibling: meta
previousSibling: <!-- [ -->
textContent: "\n"
wholeText: "\n"

Server-rendered HTML (raw, replaced tabs with spaces)

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--[--><script type="text/javascript" nonce="e27035d7e842472f84c3ac211fa" src="//local.adguard.org?ts=1740104669736&amp;type=content-script&amp;dmn=localhost:5173&amp;url=http%3A%2F%2Flocalhost%3A5173%2Fblank&amp;app=firefox.exe&amp;css=2&amp;js=1&amp;rel=1&amp;rji=1&amp;sbe=0&amp;stealth=1&amp;st-loc&amp;st-dnt"></script>
<script type="text/javascript" nonce="e27035d7e842472f84c3ac211fa" src="//local.adguard.org?ts=1740104669736&amp;name=AdGuard%20Extra&amp;name=AdGuard%20Popup%20Blocker&amp;type=user-script"></script><link rel="icon" href="/src/lib/static/logo.svg?no-inline"><!--]-->
  </head>

Server-rendered HTML (formatted)

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--[-->
  <script
    type="text/javascript"
    nonce="e27035d7e842472f84c3ac211fa"
    src="//local.adguard.org?ts=1740104669736&amp;type=content-script&amp;dmn=localhost:5173&amp;url=http%3A%2F%2Flocalhost%3A5173%2Fblank&amp;app=firefox.exe&amp;css=2&amp;js=1&amp;rel=1&amp;rji=1&amp;sbe=0&amp;stealth=1&amp;st-loc&amp;st-dnt"
  ></script>
  <script
    type="text/javascript"
    nonce="e27035d7e842472f84c3ac211fa"
    src="//local.adguard.org?ts=1740104669736&amp;name=AdGuard%20Extra&amp;name=AdGuard%20Popup%20Blocker&amp;type=user-script"
  ></script><link rel="icon" href="/src/lib/static/logo.svg?no-inline" />
  <!--]-->
</head>

7nik · 2025-02-21T10:39:09Z

It looks like AdGuard injects two scripts with \n between them into the head and the scripts remove their own nodes, but the \n is left.

hyunbinseo · 2025-02-22T07:12:19Z

I still don't get why this happens randomly though.

I've only experienced this 3 times at 10/10, 10/15, and 2/19.

I did not modifying the source code at all as mentioned above.

I am curious if @bobvork is an Adguard user #15336 (comment)

wildyaboku · 2025-02-24T14:19:07Z

Ever since moving to Svelte 5, I have also been seeing this error appear in sentry.io for an extremely small portion of users.

The stack traces point to the first line inside a <svelte:head> that uses a variable (usually meta tags or preloads), in virtually every page that does so.

I haven't been able to reproduce at all so far. I tried installing AdGuard and it didn't trigger it for me.

There is nothing special about my code. It's effectively the official SvelteKit template with TS, Tailwind, and a meta tag that uses a variable, like in OP's post.

Sasja · 2025-03-06T06:15:37Z

Its looks like a race condition between svelte and plugin code. For me it's the BitWarden plugin on Firefox. It injects a script in the head section in a seemingly random location, it seems that depending on where (or when) it lands this messes up the hydration. Triggering that s.getAttribute() on a text node. instead of the intended node.

svelte seems to iterate over the head elements in a hardcoded order and doesnt expect this element:

  var n = V0();
  Q(
    a => {
      var f = j0(),
      w = h(f),
      C = e(w, 2);
      o(C, 'href', D0);
      var q = e(C, 2);
      o(q, 'href', M0);
      var P = e(q, 2);
      o(P, 'href', U0);
      var n0 = e(P, 2);
      o(n0, 'href', Z0),

note: the function e(x, 2) here seems to select the next sibling node.
note: o() is the method set_attribute() screenshotted above by @hyunbinseo

what i see happening in the dom before the error is that svelte injected attributes in the unexpected script tag and then tries to step to the next element and unexpectedly gets a text element causing the crash when it calls getAttribute on it.

I guess the problem might be that svelte wrongly assumes the head section cannot be modified before or during running the code stepping over each element.

Hope this helps.

sveltejs/kit: 2.9.0
svelte: 5.7.1

I still don't get why this happens randomly though.

@hyunbinseo . The position where BitWarden injects the script tag looks pretty random which could explain this.

Ever since moving to Svelte 5, I have also been seeing this error appear in sentry.io for an extremely small portion of users.

@wildyaboku maybe worth to check if these happen to be Firefox users? To figure out if it's either an issue with the Firefox plugin system or with specific plugins regardless of browser.

wildyaboku · 2025-03-06T17:00:28Z

@wildyaboku maybe worth to check if these happen to be Firefox users? To figure out if it's either an issue with the Firefox plugin system or with specific plugins regardless of browser.

Thanks for the insights @Sasja.

I checked sentry and the vast majority are Chrome (up to the latest stable versions), with Chromium-based browsers (particularly new Edge), Firefox, Opera, and even Safari mixed in, both mobile and desktop for all.

So it doesn't seem to have a favorite browser in my case. 😦

AlexDev404 · 2025-04-08T19:25:39Z

Has anyone determined the fix or underlying issue causing this error to occur?
I am still facing the same sort of problem, and the issue doesn't seem to be discussed or brought up anywhere although it's seemingly common.

7nik · 2025-04-08T19:35:10Z

Cause: some extension modifies DOM (head in this case) and the order of nodes became not the one Svelte expects.
Fix: disable that extension ;D

AlexDev404 · 2025-04-16T08:38:04Z

Cause: some extension modifies DOM (head in this case) and the order of nodes became not the one Svelte expects. Fix: disable that extension ;D

Nope. Running both Playwright and a Guest window right here and still experiencing the bug.

paoloricciuti · 2025-04-16T08:41:32Z

Cause: some extension modifies DOM (head in this case) and the order of nodes became not the one Svelte expects. Fix: disable that extension ;D

Nope. Running both Playwright and a Guest window right here and still experiencing the bug.

Can you provide a repro then?

AlexDev404 · 2025-04-17T04:57:37Z

Cause: some extension modifies DOM (head in this case) and the order of nodes became not the one Svelte expects. Fix: disable that extension ;D

Nope. Running both Playwright and a Guest window right here and still experiencing the bug.

Can you provide a repro then?

Was going to link one here, but it doesn't seem to want to run in the sandbox. But after checking again it seems to instead be an issue linked to bits-ui rather than svelte itself.

Sorry about that.

paoloricciuti added the awaiting submitter needs a reproduction, or clarification label Feb 19, 2025

bobvork mentioned this issue Feb 20, 2025

TypeError: element2.getAttribute is not a function #15336

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failing to set `<svelte:head>` element with `getAttribute is not a function` #15337

Failing to set `<svelte:head>` element with `getAttribute is not a function` #15337

hyunbinseo commented Feb 19, 2025

paoloricciuti commented Feb 19, 2025

hyunbinseo commented Feb 19, 2025

paoloricciuti commented Feb 19, 2025

gtm-nayan commented Feb 20, 2025

hyunbinseo commented Feb 21, 2025

7nik commented Feb 21, 2025

hyunbinseo commented Feb 22, 2025

wildyaboku commented Feb 24, 2025

Sasja commented Mar 6, 2025 •

edited

Loading

wildyaboku commented Mar 6, 2025

AlexDev404 commented Apr 8, 2025

7nik commented Apr 8, 2025

AlexDev404 commented Apr 16, 2025

paoloricciuti commented Apr 16, 2025

AlexDev404 commented Apr 17, 2025

Failing to set <svelte:head> element with getAttribute is not a function #15337

Failing to set <svelte:head> element with getAttribute is not a function #15337

Comments

hyunbinseo commented Feb 19, 2025

Describe the bug

Reproduction

Logs

System Info

Severity

paoloricciuti commented Feb 19, 2025

hyunbinseo commented Feb 19, 2025

paoloricciuti commented Feb 19, 2025

gtm-nayan commented Feb 20, 2025

hyunbinseo commented Feb 21, 2025

7nik commented Feb 21, 2025

hyunbinseo commented Feb 22, 2025

wildyaboku commented Feb 24, 2025

Sasja commented Mar 6, 2025 • edited Loading

wildyaboku commented Mar 6, 2025

AlexDev404 commented Apr 8, 2025

7nik commented Apr 8, 2025

AlexDev404 commented Apr 16, 2025

paoloricciuti commented Apr 16, 2025

AlexDev404 commented Apr 17, 2025

Failing to set `<svelte:head>` element with `getAttribute is not a function` #15337

Failing to set `<svelte:head>` element with `getAttribute is not a function` #15337

Sasja commented Mar 6, 2025 •

edited

Loading