如何在Svelte中使用从unpkg引入的mathlive Web Component？

问题背景 #

想要在Svelte项目中集成mathlive的<math-field> Web Component，已知React中的使用方式如下：

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;

尝试了两种Svelte实现方式均报错：

1. 直接在script标签中引入CDN

// +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" />

服务器报错：

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

2. 在svelte:head中添加script标签

// +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" />

控制台报错：

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

解决方案 #

核心思路是确保mathlive库在客户端环境加载完成后，再渲染<math-field>组件，同时规避SSR环境的限制。以下提供两种可行方案：

方案1：通过npm安装并动态导入（推荐） #

1. 先安装mathlive依赖：

npm install mathlive

2. 在+page.svelte中使用onMount实现客户端侧的动态导入与组件渲染：

<script lang="ts">
  import { onMount } from 'svelte';
  let value = '';
  let mathFieldElement: HTMLElement | null = null;

  onMount(async () => {
    // 仅在客户端环境导入mathlive
    await import('mathlive');
    
    // 绑定输入事件获取值
    if (mathFieldElement) {
      mathFieldElement.addEventListener('input', (e: Event) => {
        const target = e.target as any;
        value = target.value;
      });
    }
  });
</script>

<svelte:head>
  <title>MathLive Demo</title>
  <meta name="description" content="MathLive in Svelte" />
</svelte:head>

{#if typeof window !== 'undefined'}
  <math-field bind:this={mathFieldElement} class="expression-field">{value}</math-field>
  <p>当前值: {value}</p>
{/if}

方案2：使用CDN动态加载脚本 #

如果不想安装npm包，可通过动态创建script标签的方式加载CDN资源，确保库加载完成后再渲染组件：

<script lang="ts">
  import { onMount } from 'svelte';
  let value = '';
  let mathFieldElement: HTMLElement | null = null;
  let isMathLiveLoaded = false;

  onMount(async () => {
    return new Promise((resolve) => {
      const script = document.createElement('script');
      script.src = '//unpkg.com/mathlive';
      script.onload = () => {
        isMathLiveLoaded = true;
        // 加载完成后绑定输入事件
        if (mathFieldElement) {
          mathFieldElement.addEventListener('input', (e: Event) => {
            const target = e.target as any;
            value = target.value;
          });
        }
        resolve();
      };
      document.head.appendChild(script);
    });
  });
</script>

<svelte:head>
  <title>MathLive Demo</title>
  <meta name="description" content="MathLive in Svelte" />
</svelte:head>

{#if isMathLiveLoaded}
  <math-field bind:this={mathFieldElement} class="expression-field">{value}</math-field>
  <p>当前值: {value}</p>
{/if}

报错原因说明 #

• 第一种方法报错：Vite的SSR会尝试在Node.js环境解析CDN导入路径，而Node.js无法直接处理这类URL，导致导入失败。
• 第二种方法报错：<math-field>组件在Svelte渲染时已被创建，但mathlive脚本尚未加载完成，Web Component初始化时找不到必要的依赖，触发空指针错误。

内容的提问来源于stack exchange，提问作者tlietz