-
Notifications
You must be signed in to change notification settings - Fork 48
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
DevTools causes hydration errrors on page refresh in Next.js #187
Comments
@raleigh9123 I've the same issue in a next.js app caused by DevTools. I use the following dynamic import workaround for now: const DevT = dynamic(
() =>
import('@hookform/devtools').then((module) => {
return module.DevTool
}),
{ ssr: false },
) |
@Nurou 's answer worked for me! Thank you!! Here's a slightly updated, typescript-compatible version of it that worked for me (hope it can save a few minutes for others like me who enjoy having a painful eslint config 😄 ): import dynamic from 'next/dynamic';
const DevT: React.ElementType = dynamic(
() => import('@hookform/devtools').then((module) => module.DevTool),
{ ssr: false }
); Then, (like @Nurou insinuates), I can use it like so: ...
return (
<FormProvider {...methods}>
<DevT control={methods.control} placement="top-left" />
...
</FormProvider>
) |
@adamwdennis cool.. working.. |
thank you so much |
Here is the updated code:
Update: This will not work. VSCode will still complain about the
So go with @adamwdennis' answer here: #187 (comment)
Update 2: Or you could do the following - seems to work too:
|
I thought I had done something wonky in my app when these errors started appearing. I rolled back on some changes and learned that they appeared when I refresh the page that has the component imported.
I am working within a Blitz.js app which is built on Next.js (I am unsure, but am lead to believe that this is a problem within Next.js?)
The
component used by default in the Blitz.js installation is a little bit of a beast, in my opinion, and I added a couple more details to allow me to pass a custom prop to the child inputs.My Form Component
Again, the hydration errors ONLY occur when I refresh the page. They are listed in the following screenshot. I have not tried anything as a solution, but they do not appear when I remove the component.
The following is my package.json dependencies:
The text was updated successfully, but these errors were encountered: