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.

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

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

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