Getting "Text content does not match server-rendered HTML" on beta version

[chilikasha]

Hi, Updated to beta from v1 and getting 2 errors when opening site: "Text content does not match server-rendered HTML" and "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering"

Warning: Text content did not match. Server: "Last updated on May 1, 2022" Client: "Last updated on 1 May 2022"
div
main
article
Body@webpack-internal:///./node_modules/nextra-theme-docs/dist/index.js:2227:12

"nextra": "^2.0.0-beta.6",
"nextra-theme-docs": "^2.0.0-beta.6",

[dimaMachina]

Will be fixed in next release

[chilikasha]

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

@B2o5T hey, should this one also be fixed? still getting this on beta 11

[dimaMachina]

@chilikasha needs more details where error occurs or reproduction, examples work fine

[chilikasha]

@B2o5T unfortunately I haven't pushed these changes, still working on them. but can provide the following details: _app.js file

import 'nextra-theme-docs/style.css'
import '../public/style.css'
import { usePanelbear } from '@panelbear/panelbear-nextjs'

export default function Nextra({ Component, pageProps }) {
  usePanelbear('token', {
    debug: false
  })
  const getLayout = Component.getLayout || ((page) => page)
  return getLayout(<Component {...pageProps} />)
}

package.json

"next": "^12.1.6",
"nextra": "^2.0.0-beta.11",
"nextra-theme-docs": "^2.0.0-beta.11",
"react": "^18.0.0",
"react-dom": "^18.0.0"

I do yarn next and open localhost:3000. usually it opens without any errors. but then I navigate to some page and refresh it. result is on this video: https://jmp.sh/vS6p0Ez

please let me know if I can provide smth else

[dimaMachina]

@chilikasha have you tried to comment usePanelbear hook?

[chilikasha]

@B2o5T just tried, no difference. what I've mentioned is: I have some span elements in mdx files. code is like:

<div><span className="tag">macOS</span><span className="tag">free</span></div>

if I remove these divs from an mdx file, then I don't see the errors (though they are present on the pages where similar divs are left)

[chilikasha]

I suck at front-end dev, but guess I've fixed that by moving this span to a component

[dimaMachina]

@chilikasha just tried to add <div><span className="tag">macOS</span><span className="tag">free</span></div> and didn't receive some error. Could you provide a reproduction?

[chilikasha]

@B2o5T hm, then I don't have any good ideas. probably you could clone https://github.com/chilikasha/tinytools and paste this <span> in any .mdx page and see if it's reproducible. (try refreshing pages, I was usually getting errors on refresh)

[dimaMachina]

@chilikasha just tried, and I didn't receive some errors, seems like you updated to the latest nextra/nextra-theme-docs and the error disappeared ?