next.js: [next@12.1.1-canary.17 + react@18.0.0-rc.3] The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:34:37 PST 2022; root:xnu-8020.101.4~2/RELEASE_X86_64
Binaries:
  Node: 16.13.1
  npm: 8.1.2
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.1.1-canary.17
  react: 18.0.0-rc.3
  react-dom: 18.0.0-rc.3

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

next dev

Describe the Bug

The next@12.1.1-canary.17 and react@18.0.0-rc.3 does not work with Suspense mode.

import {lazy, Suspense} from 'react';

const MyComponent = lazy(() => import('../components/MyComponent'));
...
  <Suspense fallback='Loading...'>
      <MyComponent />
   </Suspense>
...

Expected Behavior

Just works

To Reproduce

0/ Clone https://github.com/nghiepit/next-12-react-18-rc 1/ yarn install 2/ yarn dev 3/ See error…

Note: The error appears only once, to show the error again we need to restart the server with yarn dev

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 21 (17 by maintainers)

Commits related to this issue

reproduce vercel/next.js#35564 — committed to Reflex2468/nextjs-suspense-boundary-test by deleted user 2 years ago
reproduce vercel/next.js#35564 with experimental runtime & react@rc, next canary — committed to Reflex2468/nextjs-suspense-boundary-test by deleted user 2 years ago
Adds suspense to the Vanilla route — committed to randreu28/ParticlesShowcase by randreu28 2 years ago

Most upvoted comments

Can confirm that this is still an issue on next 12.1.4. In my case I can’t load Canvas from react-three-fiber (which is a big component) using next/dynamic with {ssr: false, suspense: true}. But if I tried to load small components, it works. Edit: It works with React.lazy but not with next/dynamic {ssr: false, suspense: true}

harisraharjo on Apr 2, 2022

to be clear, this is still an issue with nextjs because nextjs has no way to render a suspense fallback on the server without an error message showing.

Functionally everything works expect for this incorrect error.

In blitz we patch the nextjs reactdom error function to hide this error. We’ll update that for nextjs this week, but functionality still works correctly.

flybayer on Nov 8, 2022

Gotcha so it’s an issue on blitz. I’ll close this issue for now since I cannot repro with nextjs as the issue is resolved.

huozhi on Nov 8, 2022

@nghiepit you should be able to achieve it with next@12.1.2, let us know if you have any issue with it.

huozhi on Mar 29, 2022

Hey, React v18.0 was released. Waiting for a PR make Next.js works without manually add experimental.runtime: 'nodejs'

nghiepdev on Mar 29, 2022

@phuwin95 Can you try the canary version? "next": "^12.1.0", seems that you’re using the latest stable but current support of react 18 rc >= 2 is on canary

huozhi on Mar 25, 2022

This is because of React.lazy requires using streaming rendering to work the Suspense, next.js will do it soon when detect user is using react 18.

Atm you could add experimental.runtime: 'nodejs' to forces next.js enable streaming rendering to solve this.

huozhi on Mar 24, 2022