Prop `className` did not match - when using next/font variable prop #47741

piotrkulpinski · 2023-03-31T12:10:24Z

piotrkulpinski
Mar 31, 2023

Summary

I'm getting a hydration error on a fresh app while trying to use the variable option of next/font package.
Here's my code:

import { Inter } from 'next/font/google'
import Head from 'next/head'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={`${inter.variable} font-sans`}>Witam</main>
    </>
  )
}

This logs the following warning in the console:

Warning: Prop `className` did not match. Server: "__variable_44d352 font-sans" Client: "__variable_e7970e font-sans"
    at main
    at Home
    at App (webpack-internal:///./src/pages/_app.tsx:12:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:303:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:852:919)
    at Container (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:62:1)
    at AppContainer (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:172:11)
    at Root (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:347:11)

Any way to get rid of that?

Additional information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.13.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: 8.1.0
    Relevant packages:
      next: 13.2.4
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

Example

No response

icyJoseph · 2023-04-01T08:25:12Z

icyJoseph
Apr 1, 2023
Collaborator

Hi,

I can't really reproduce this issue.

Are you using .babelrc? or something else on your project? What does your next.config.js look like? Got something going on in _app?

0 replies

gbrlmngr · 2023-04-12T11:12:22Z

gbrlmngr
Apr 12, 2023

@piotrkulpinski, just encountered this as well. In my case, the font was not available to be fetched from Google, for a brief moment, which forced next/font to generate a hash based on a default font, instead.

3 replies

AndyPandyGeek Apr 12, 2023

It happened to me today as well, I was freaked out until I came across your response just now.
Had to remove the ".next" folder and "npm run dev" again.

Podfelix Apr 13, 2023

f7e20c4c-5ce2-4989-98c9-dccd8961a72f

cesutherland Apr 21, 2023

Removing the .next and running npm run dev sorted it for me after upgrading from @nextjs/font to next/font.

cesutherland · 2023-04-21T01:32:42Z

cesutherland
Apr 21, 2023

I encountered this error after switching from @nextjs/font to next/font using the codemod:

npx @next/codemod@latest built-in-next-font .

Removing the .next and running npm run dev sorted it for me.

0 replies

juliomuhlbauer · 2024-03-10T16:05:52Z

juliomuhlbauer
Mar 10, 2024

Same error

0 replies

roelvan · 2024-03-19T09:56:22Z

roelvan
Mar 19, 2024

I am having this issue too. Removing .next did not help me.

0 replies

cpouldev · 2024-07-27T11:13:31Z

serdargulum · 2024-08-30T04:29:22Z

serdargulum
Aug 30, 2024

In nextConfig, I removed the eslint: { ignoreDuringBuilds: true } parameter, and the problem was fixed.

note: This parameter also causes the 'Hydration failed because the initial UI' error.

0 replies

Prop className did not match - when using next/font variable prop #47741

Uh oh!

Summary

Additional information

Example

Replies: 7 comments · 5 replies

Uh oh!

Uh oh!

icyJoseph Apr 1, 2023 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Prop `className` did not match - when using next/font variable prop #47741

Replies: 7 comments 5 replies

icyJoseph
Apr 1, 2023
Collaborator