Verify canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
Binaries:
Node: 16.14.2
npm: 8.1.4
Yarn: 1.22.1
pnpm: 6.32.4
Relevant packages:
next: 12.1.6-canary.16
react: 18.1.0
react-dom: 18.1.0
Describe the Bug
Using dynamic component import with {suspense: true, ssr:false} cause this error:
Error: The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.
Important Note: functionally this works correctly, the issue is just that an error is being generated and so it appears broken
Expected Behavior
Should work without any error popup or error in browser console
To Reproduce
import { Suspense } from "react";
import dynamic from "next/dynamic";
const Thing = dynamic(() => import("../thing"), { ssr: false, suspense: true });
export default function IndexPage() {
return (
<div>
<p>Next.js Example</p>
<Suspense fallback="Loading...">
<Thing />
</Suspense>
</div>
);
}//thing.js
export default function Thing() {
return "Thing";
}Other
You can also cause this same behavior with this next.js page:
import { Suspense } from "react";
export default function Thing() {
if (typeof window === 'undefined') {
const e = new error()
e.name = "rendering suspense fallback..."
delete e.stack
throw e
}
return "Thing"
}
export default function IndexPage() {
return (
<div>
<p>Next.js Example</p>
<Suspense fallback="Loading...">
<Thing />
</Suspense>
</div>
);
}
Verify canary release
Provide environment information
Describe the Bug
Using dynamic component import with
{suspense: true, ssr:false}cause this error:Important Note: functionally this works correctly, the issue is just that an error is being generated and so it appears broken
Expected Behavior
Should work without any error popup or error in browser console
To Reproduce
Runable reproduction: https://codesandbox.io/s/dank-sound-pkxopr?file=/pages/index.js
Other
You can also cause this same behavior with this next.js page: