在React组件中使用SWR时渲染错误

Question

我目前正在创建一个博客，并且正在尝试在博客文章中添加一个ViewCount。

import { useEffect } from 'react'
import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((r) => r.json())

export default function ViewCounter({
  slug,
  addView = false,
}: {
  slug: string
  addView?: boolean
}) {
  console.log('ViewCounter', slug)
  const { data } = useSWR(`/api/views/${slug}`, fetcher)
  const viewCount = new Number(data?.total)

  useEffect(() => {
    console.log('ViewCounter useEffect', slug, addView)
    const registerView = () =>
      fetch(`/api/views/${slug}`, {
        method: 'POST',
      })

    if (addView) {
      registerView()
    }
  }, [slug])

  // return `${viewCount > 0 ? viewCount.toLocaleString() : '–––'} views`
  return (
    <span className="flex items-center gap-1">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="h-5 w-5"
        // viewBox="0 0 48 48"
        // viewBox="0 0 24 24"
        viewBox="0 0 1024 1024"
        stroke="currentColor"
        fill="currentColor"
      >
        <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path>
      </svg>
      {viewCount}
    </span>
  )
}

当我将此组件添加到我的博客文章中时，我会收到以下错误，我不知道为什么： 错误：元素类型无效：预期字符串（用于内置组件）或类/函数（用于复合组件），但GoT：未定义。您可能会忘记从定义的文件中导出组件，或者您可能将默认值和命名为导入。

在删除SWR并插入组件确实呈现的预定值时。

当我尝试在博客文章中渲染组件时，我遇到的确切错误