944c734d04
Implements https://github.com/vercel/next.js/issues/30997 with some minor tweaks to the design: * The hook is moved to Client Components (e.g. `pages/_app` instead of `pages/_document`). This was a silly oversight in the original design: the hook needs to be called during server prerendering. * `useFlushEffects` instead of `useFlushEffect` as there isn't a particularly safe way to implement the singular semantics as a Client Component hook given the current implementation of server rendering. --- Fixes #30997
684 B
684 B
useFlushEffects can not be called on the client
Why This Error Occurred
The useFlushEffects hook was executed while rendering a component on the client, or in another unsupported environment.
Possible Ways to Fix It
The useFlushEffects hook can only be called while server rendering a client component. As a best practice, we recommend creating a wrapper hook:
// lib/use-style-libraries.js
import { useFlushEffects } from 'next/streaming'
export default function useStyleLibraries() {
if (typeof window === 'undefined') {
// eslint-disable-next-line react-hooks/rules-of-hooks
useFlushEffects([
/* ... */
])
}
/* ... */
}