[[email protected] + [email protected]] The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering

[nghiepdev]

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 [email protected] and [email protected] 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

[huozhi]

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.

[phuwin]

@huozhi When I use experimental.runtime: 'nodejs', the page doesn't load, it keeps on loading:
https://www.youtube.com/embed/dErzBwI6DeQ?start=76
I'm using node v15. My dependencies:

    "axios": "^0.26.1",
    "next": "^12.1.0",
    "react": "^18.0.0-rc.3",
    "react-dom": "^18.0.0-rc.3"

[huozhi]

@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

[phuwin]

@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

It works now! Thank you. I'm checking this on the doc and it doesn't mention the canary version of next at all.
https://nextjs.org/docs/advanced-features/react-18/overview#using-react-18-with-nextjs

[huozhi]

There're few pending changes that about to release soon, might have some mismatch between the online docs with changes. Community folks has filed PR to change that part to next@canary in the doc, it will gets updated in next release.

[nghiepdev]

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

[huozhi]

@nghiepit you should be able to achieve it with [email protected], let us know if you have any issue with it.

[harisraharjo]

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}

[huozhi]

@harisraharjo can you provide a minimal reproduction for this? If you specify suspense: true dynamic component should use React.lazy and ignore the ssr option since it will be SSR'd.

[Reflex2468]

I'm currently experiencing the same issue when trying to put a <Suspense> around a plot from react-plotly.
I've created a minimal reproduction here: https://github.com/Reflex2468/nextjs-suspense-boundary-test.

I'm not sure if this issue belongs here or in the repository for react-plotly, though.

EDIT: I also made a branch where I have experimental.runtime on nodejs with react@rc and next on the latest canary build.

[flybayer]

Since React.lazy is working with latest React and next@canary, I've opened a new issue for dynamic with {suspense: true, ssr: false}

#36636

[tmcw]

Oddly I'm seeing this bug pop up when I upgrade from 13.0.0 to 13.0.1. I'd love to help out with a better error stacktrace, but it's basically the same as the OP - no real sign of what component or part of the codebase in general is causing this error.

[huozhi]

@tmcw can you confirm that if you're seeing it in app/ dir?

[tmcw]

Yes, in an app/ directory, which I was using before the next 13 release concidentally. I have not set appDir: true in my configuration though, so I think - I assume? - that app/ would not have any of the new experimental behavior?

[huozhi]

@tmcw thanks for confirmation, it should work, next/dynamic will behave like React.lazy that ignoring the options when it's being used in app dir.
I filed #42426 that targets to fix that issue for app dir

[tmcw]

Not sure if the intent was to fix this in 13.0.2, but just tested in 13.0.2 and I can confirm that the issue persists, seeing the same bug.

[huozhi]

@tmcw can you provide a reproduction for us to investigate? that would be super helpful 🙏 The comments in this issue are crowded with few different issues, previously I thought your case is breaking with ssr: false, maybe I missed something

[tmcw]

Sure, I'll give it a shot. This bug is unfortunately really hard to narrow down because the error message has no information, function names, line numbers, etc., so it's pretty much shooting in the dark. I'll try just deleting code until it stops crashing 🤣

---

Okay, according to the folks working on Blitz, this is a known issue for them that there are incompatibilities with Next 13. Anyway, here's a repro repo, this bug manifests if you just create a new Blitz project and update Next to 13.x. https://github.com/tmcw/next-13-test-result

[huozhi]

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.

[flybayer]

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.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.