How to use react v18 with nextjs v12.3.1 - Suspense boundary and StartTransition and new createRoot

Question

I am trying to figure out how to get a react app to work next js.

I am using this boilerplate app template, but with react v18 (and next v 12.3.1).

I tried changing _app.tsx so that it is now wrapped in a suspense boundary:

 <ChakraProvider theme={theme}>
      <ApolloProvider 
          client={apolloClient}
        >
            {getLayout(
              <React.Suspense fallback={<div>Loading...</div>}> <Component {...pageProps} />
              </React.Suspense>
              )
            }
        </ApolloProvider>
      </ChakraProvider>
    </>
  )

but when I try to start the local host, I get a message that says:

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

I have seen this post and am trying to follow the principles it describes but I cannot find corresponding concepts in next.js, index.tsx. That file has:

import * as React from "react"
import { ColorModeScript } from "@chakra-ui/react"
import Document, { Head, Html, Main, NextScript } from "next/document"

export default class AppDocument extends Document {
  static getInitialProps(ctx: any) {
    return Document.getInitialProps(ctx)
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" key="theme-color" content="#000000" />
          <meta name="description" content="description goes here" key="description" />
          <meta property="og:title" content="title goes here" key="title" />
          <meta property="og:description" content="add a description" key="og:description" />
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <ColorModeScript initialColorMode="light" />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

The other post suggests finding where the index.js file has:

ReactDom.render(<h1>Your App</h1>, document.getElementById('root'))

and replacing it with

import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<h1>Your App</h1>)

What is the equivalent of that ReactDOM.render in nextjs? Does anyone know how to get a page to load using react v18 and next 12.3.1?

score 0 · Answer 1 · answered Nov 19 '22 at 20:21

I hope this helps. if you want a page to render in Next place in the pages directory i.e pages/about.js Link to docs here The boilerplate i.e/packages/web/src should work fine.

  <Suspense fallback={<div>loading<div/>}>
    <ChakraProvider theme={theme}>
      <ApolloProvider client={apolloClient}>
        {getLayout(<Component {...pageProps} />)}
     </ApolloProvider>
  </ChakraProvider>
</Suspense>

For your lazy import use docs

const DynamicHeader = dynamic(() => import('../components/header'), {
    suspense: true,
     })

How to use react v18 with nextjs v12.3.1 - Suspense boundary and StartTransition and new createRoot

1 Answers1