未捕获（承诺）DOMException：Document.querySelector with Google Fonts Link in NextJS

Question

将 Next 应用程序部署到 Vercel 后，我收到以下错误代码：

Uncaught (in promise) DOMException: Document.querySelector: 'style[data-href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"]' is not a valid selector

现在我在 NextJS 的白标签应用程序上通过 API 调用此 link。我目前有一个包装我的应用程序的布局组件，它在 _app.tsx.

上被调用

这个错误不会发生在我的本地 Next Server 上，只会出现在生产环境中，您可以在此处看到：

https://www.wellaedu.com.br/

代码包裹在 Head 标签上，如下所示：

      <Head>
        <title>{course?.title}</title>
        <meta name="description" content={course?.short_description} />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href={brand?.settings?.fonts?.font_link} rel="stylesheet" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
      </Head>

有人遇到过这个问题吗？对正在发生的事情有什么想法吗？

Answer 1

您必须在自定义 _document.js 中使用 <link> 标签，就像在 docs 中一样。

// _document.js
import { Head } from 'next/document'

...

<Head>
  <link rel="icon" href={brand?.logo} />
  <link href={brand?.settings?.fonts?.font_link} rel="stylesheet" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
</Head>

...

未捕获（承诺）DOMException：Document.querySelector with Google Fonts Link in NextJS

Uncaught (in promise) DOMException: Document.querySelector with Google Fonts Link in NextJS

reactjs

next.js

google-fonts

vercel