Prop `className` did not match

[whitedelay]

Hello, thank you for your great project.

I have an issue.
I rendered my notion page using react-notion-x in my next.js project, and this error sometimes occurred.

Warning: Prop "className" did not match. Server: " language-bash" Client: "language-bash"

I found that the class name of code block has space at the front.

<pre class="notion-code language-bash">
  <code class=" language-bash">

Only code block has this issue.
Do you know how to solve this problem?

[MichaelCasaDev]

I have the same error, still don't know how to solve it...

[yokinist]

I'm having the same problem.

"next": "^11.1.2",
"react": "^17.0.2",
"react-notion-x": "^4.9.8",

Rendering the page via Next/Link was fine, but I could reproduce this error by reloading the page or access URL directly. So, I think this behavior that happens with SSR.

---

FYI:
Page: https://yokinist.me/outer-link
Source Code: https://github.com/yokinist/yokinist.me/blob/main/layouts/layout.tsx

🙆‍♂️

🙅‍♂️

[remorses]

Reading other prismjs examples like this one i think we can just skip adding the landuage-{language} classname, it looks like prism doesn't need that when using the highlight function

[transitive-bullshit]

The Code component has been updated to fix this issue which should be resolved in v6.