How to use web components imported from unpkg in Svelte?

Question

I'm trying to get mathlive web components working in my Svelte project. In React, their math-field webcomponent is able to be used like this:

import "./App.css";
import "//unpkg.com/mathlive";
import { useState } from "react";

function App() {
  const [value, setValue] = useState("");

  return (
    <div className="App">
      <math-field 
        onInput={evt => setValue(evt.target.value)}
      >
        {value}
      </math-field>
      <p>Value: {value}</p>
    </div>
  );
}

export default App;

I saw this reddit answer about using onMount to ensure that the library is loaded before usage, but I'm not sure how that can be applied to my situation in which a webcomponent is used.

So I tried to do this in 2 different ways with Svelte.

1. importing in script tags of +page.svelte:

// +page.svelte
<script lang="ts">
    import '//unpkg.com/mathlive';
</script>

<svelte:head>
    <title>app</title>
    <meta name="description" content="app" />
</svelte:head>

<math-field class="expression-field" />

It did not work and the server gave the following error:

[vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "//unpkg.com/mathlive"                                                                                           

2. script tag in svelte:head:

// +page.svelte
<script lang="ts">
</script>

<svelte:head>
    <title>app</title>
    <meta name="description" content="app" />
    <script src="//unpkg.com/mathlive">
    </script>
</svelte:head>

<math-field class="expression-field" />

devtools console gave the following error:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at new Ta (mathlive:2413:6157)
    at re.connectedCallback (mathlive:2422:5542)

Answer 1

Add a defer in the script tags of svelte:head:

// +page.svelte
<script lang="ts">
</script>

<svelte:head>
    <title>app</title>
    <meta name="description" content="app" />
    <script defer src="//unpkg.com/mathlive">
    </script>
</svelte:head>

<math-field class="expression-field" />