-
Notifications
You must be signed in to change notification settings - Fork 26.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ReactDOMServer does not yet support Suspense #29116
Comments
This seems to have cropped up before when a translation module started using Suspense, but the solutions seem to boil down to disabling Suspense on it, which doesn't help me if I'm trying to use Suspense. |
React |
Even though my site is purely static And client side using next export? Edit: never mind, I guess it's still using ssr in dev mode... |
Hi, as mentioned above I'm gonna close this as this doesn't appear to be a bug in Next.js. |
This seems to work in next@12.0.8. What happen to me is I did:
however, Doing:
Fixed it. Take a look at other dependencies and make sure they are up to date as well. |
Based on what @ijjk said, I thought an easy/elegant solution would be to just drop in a Suspense replacement that waits until after hydration: const SuspensePostHydration = function(props: SuspenseProps): JSX.Element {
const [postHydration, setPostHydration] = useState(false);
useEffect(() => {
setPostHydration(true);
}, []);
return postHydration
? (<Suspense {...props} />)
: <></>;
} And use it like so: const DynamicNoSsrComponent = dynamic(() => import('./DynamicComponent'), { ssr: false });
// ...
return (
<SuspensePostHydration
fallback={(
<h1>loading...</h1>
)}
>
<DynamicNoSsrComponent />
</SuspensePostHydration>
); But for some reason it never renders the |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
What version of Next.js are you using?
10.0.7
What version of Node.js are you using?
14.17.5
What browser are you using?
Edge, Chrome
What operating system are you using?
Windows
How are you deploying your application?
export
Describe the Bug
I tried adding Recoil to my project for state management and used async selectors for datafetching, but as soon as I try and use a Suspense boundary in my project with them, I get thid "ReactDOMServer does not yet support Suspense" error coming from the _document.js file used with Material UI: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
Expected Behavior
I expect to be able to use Suspense in my project with Material UI without it crashing.
To Reproduce
Start a project, add Material UI and the _document file from here: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js, then add a Suspense boundary to your React tree and refresh the page.
The text was updated successfully, but these errors were encountered: