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

user_14449543 0
Viewed 56

After deploying a Next app to Vercel, I'm getting the following error code:

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

enter image description here

Right now I'm calling this link through API on a whitelabel application in NextJS. I currently have a Layout component which wraps my application and it's called on _app.tsx.

This error doesn't occur on my local Next Server, only appears in production as you can see here:

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

The code is wrapped on a Head tag as following:

      <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>

Has anybody faced this before? Any ideas of what is happening?

google-fonts vercel next.js reactjs
1 Answers

You must use the <link> tag in a custom _document.js as in the 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>

...
user_94424380
Related