Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[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

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Comments:21 (16 by maintainers)

Top GitHub Comments

2reactions

harisraharjocommented, Apr 2, 2022

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}

1reaction

flybayercommented, Nov 8, 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.