search

splitbee / react-notion

A fast React renderer for Notion pages
https://react-notion.com
MIT License
2.86k stars 151 forks source link

Codeblock className is prefixed with an empty space on the Server but not on the Client #49

Open vogelino opened 3 years ago

vogelino commented 3 years ago

Hi there! First, let me thank you for writing and sharing this package! I'm a fan of notion and being able to use it as a source for my sites is awesome!

I've come across a weird SSR error using NextJs and the method getStaticProps exactly like in your README example. I'm grabbing content from a notion page that includes a javascript code block. I then get the following (hydration?) error:

Prop `className` did not match. Server: " language-javascript" Client: "language-javascript"

As you can see, the server className is prefixed with a space character but the client is not. I could find where this className is set in the code and where the language is set but I cannot see where the space prefix might come from. Any idea what could cause this difference between server and client?

The code to my repository is here: https://github.com/vogelino/fast-assembled-furniture/blob/staging/pages/brand/ui/buttons.tsx

Thx and keep up the good work! 🤜🤛

tobiaslins commented 3 years ago

Hey @vogelino!

Thanks for raising that up.

That's very strange indeed. We'll take a look at this!

vogelino commented 3 years ago

Thank you very much! :)