Svelte应用中使用marked时出现parse()未定义错误求助

我尝试在Svelte应用中使用marked渲染Markdown内容，已通过npm本地安装该库，且marked已存在于package.config中，智能提示也能识别到parse()函数。但运行应用时出现如下错误：

ServiceDetail.svelte:27 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'parse')
    at create_each_block_1 (ServiceDetail.svelte:27:57)
    at create_fragment (ServiceDetail.svelte:26:23)
    at init (index.mjs:2017:37)
    at new ServiceDetail (ServiceDetail.svelte:4:14)
    at createProxiedComponent (svelte-hooks.js?v=92e3ea1b:341:9)
    at new ProxyComponent (proxy.js?v=92e3ea1b:242:7)
    at new Proxy<ServiceDetail> (proxy.js?v=92e3ea1b:349:11)
    at create_if_block_2 (+page.svelte:4:29)
    at create_fragment (+page.svelte:11:32)
    at init (index.mjs:2017:37)

我的代码如下：

<script lang="ts">
  import ContactButton from "../../ContactButton.svelte";
  import { marked } from "marked";
  export let service;
</script>
...
...
          <div class="col-lg-15">
              <div class="card-span-img">
                <span>
                  <i class="{service.faIcon} fs-4 text-success"></i>
                </span>
              </div>
              <div class="card-body pt-6 pb-4 text-dark service-detail bg-200">
                <h5 class="mb-2"></h5>
                {#each service.detail.paragraphs as paragraph}
                  <p class="card-text markdown">{marked.parse("# TEST")}</p>
                {/each}
                <p><u>References</u></p>
                <ul>
                  {#each service.detail.links as link}
                    <li><a href="{link.url}" class="card-link" target="_blank" rel="noreferrer">{link.text} </a></li>
                  {/each}
                </ul>
                <ContactButton />
              </div>
          </div>

请问我遗漏了什么？

• 修正marked导入方式
  marked v4+版本默认导出是marked对象，而非命名导出。将导入语句改为：

  import marked from "marked";
  

  替代原来的import { marked } from "marked";

• 添加数据存在性校验
  错误发生在{#each}渲染块，大概率是service或service.detail.paragraphs未加载完成时组件已开始渲染。添加条件判断避免提前执行marked.parse：

  {#if service?.detail?.paragraphs}
    {#each service.detail.paragraphs as paragraph}
      <p class="card-text markdown">{marked.parse("# TEST")}</p>
    {/each}
  {/if}
  

• 异步加载marked（适配SSR场景）
  如果是服务端渲染项目，marked可能需要异步初始化。修改脚本部分：

  import { onMount } from 'svelte';
  import ContactButton from "../../ContactButton.svelte";
  export let service;
  let marked;
  
  onMount(async () => {
    marked = (await import('marked')).default;
  });
  

  同时配合上述的条件渲染，确保marked加载完成后再调用方法。

• 重新安装依赖
  执行以下命令重置依赖，确保marked安装完整：

  rm -rf node_modules package-lock.json
  npm install
  

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