InvalidCharacterError in svelte/sapper when resizing window

Question

I build a website with sapper. When I resize my window (smaller, then big again), I get this error in Firefox:

String contains an invalid character in svelte

in the file index.mjs:249. Clicking on the file leads to this function:

function attr(node, attribute, value) {
    if (value == null)
        node.removeAttribute(attribute);
    else if (node.getAttribute(attribute) !== value)
        node.setAttribute(attribute, value);
}

And the error seems to be here: node.setAttribute(attribute, value); Anybody an idea what could cause this error? I have some conditional logic to display components depending on the windows size:

<script>
  let windowSize;
</script>

<svelte:window bind:innerWidth={windowSize} />

{#if windowSize >= 768}
  <Image />
{/if}

Could this cause the error?

UPDATE

Google Chrome throws this error:

Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '`rel' is not a valid attribute name.

Gh05d Gh05d · Accepted Answer · 2020-07-02T12:40:57

Fixed it. There was a backtick (`) within the attributes of an <a /> tag:

<a
  `rel="noreferrer"
   aria-label={external}
   class="social-media-icon"
   target="_blank"
   href={external}>

InvalidCharacterError in svelte/sapper when resizing window

1 Answers