Next.js Discord

Discord Forum

Error: Text content does not match server-rendered HTML.

Answered
Spotted Rail posted this in #help-forum
Open in Discord
Spotted RailOP
Answered by Spotted Rail
@Anay-208 @American Crow Update:
I decided to restart my project with a fresh installation of every dependency and also switching to react's latest version (18.3.1), previously it was just ^18. Everything is working fine now.
Thank you once again.
View full answer

96 Replies

Spotted RailOP
nextjs v14.1.0,
code:
"use client"

import { useFormState, useFormStatus } from 'react-dom';
import { authenticate, discordLogin } from '@/app/lib/actions';
import { useForm } from "react-hook-form";

export default function SignInForm() {
    const { register, handleSubmit, formState: { errors } } = useForm();
    const [errorMessage, dispatch] = useFormState(authenticate, undefined);

    const action = handleSubmit(async (data) => {
        const response = await dispatch(data);
        console.log("UserData", data);
    });

    return (
        <form action={action}>
            <h2>Sign In</h2>
            <input {...register("email", { required: true })} type="email" placeholder="Email" />
            {errors.email && <span className="error">Email is required</span>}
            <input {...register("password", { required: true })} type="password" placeholder="Password" />
            {errors.password && <span className="error">Password is required</span>}
            <button type="submit">Sign Ins</button>
            <button type='button' onClick={() => discordLogin()}>Login with Discord</button>
            <div
                className="flex h-8 items-end space-x-1"
                aria-live="polite"
                aria-atomic="true"
            >
                {/* {errorMessage && (
                    <>
                        <p className="text-sm text-red-500">{errorMessage}</p>
                    </>
                )} */}
            </div>
        </form>
    )
}
Spotted RailOP
I'd really appreciate if someone can point what's wrong with my code here
been stuck on this issue since many days now, killing my productivity
American Crow
Looks like a bug to me i mean
<h2>Sign In</h2> how could that hardcoded value be different on client and server.
Did you try to update to the latest nextjs version?
@American Crow Looks like a bug to me i mean `<h2>Sign In</h2>` how could that hardcoded value be different on client and server. Did you try to update to the latest nextjs version?
Spotted RailOP
Sorry I forgot to mention that when I change anything in my code, yes even a text character, that above error gets thrown. And also the changes do not reflect in the UI until I stop the dev server and restart it.
@American Crow Looks like a bug to me i mean `<h2>Sign In</h2>` how could that hardcoded value be different on client and server. Did you try to update to the latest nextjs version?
Spotted RailOP
3 weeks ago I was using nextjs v14.2.3, I had to downgrade to 14.1.0 cuz of a middleware issue
And I have very similar code in my signup form, but that is working fine
Spotted RailOP
this is signup form, which is working without any issues.
Spotted RailOP
@American Crow just to check if it's something wrong in my code, I switched to nextjs 14.2.3, and the hydration error does not show up, but the problem that still remains is that the code changes do not reflect until I restart dev server (this is only happening with my signInForm.jsx).
Edit: the same error is back while i was away for a while :Cry:
American Crow
The hydration errors mostly only appear on hard refresh (f5)
@American Crow The hydration errors mostly only appear on hard refresh (f5)
Spotted RailOP
I swear I did that before that as well, but anyway one thing is clear issue is not with nextjs version, or is it too early to say?
American Crow
So what hydration error is thrown with that new code ?
Spotted RailOP
same, let me share it again
American Crow
I don't even see any "Sign in" or "Sign" string in the new code, am I blind?
@American Crow I don't even see any "Sign in" or "Sign" string in the new code, am I blind?
Spotted RailOP
what are u looking at? I have only shared one signInForm code
American Crow
Oh it's singup and signin
Spotted RailOP
yes
American Crow
i though its the same component but reworked
American Crow
both is strange that your HMR (refresh on code change) does not work and the hydration error as well.
I'd try to pinpoint the root by commenting out different parts of your form.
(Not necessarily the <h2> Sign In </h2> i think this is a false positive.)
Simplify as much as possible, add stuff back in, see when the error occurs
Spotted RailOP
Right i have tried this earlier but gonna try it again anyway
and let u know if anything comes up
American Crow
Some wierd things which can cause hydration errors are browser plugins (e.g. password managers) and nested layouts e.g. having 2 <body> tags. But i don't think thats it in your case
Spotted RailOP
yes, I have tried running it in different browsers with no extension, but doesn't change anything
American Crow
wait one more thing.
You have the string "Sign In" in <h2> and further down in a <button> as well. Which of the two is causing the hydration error?
American Crow
<button type='button' onClick={() => discordLogin()}>Login with Discord</button>
you instantly invoke discordLogin is that it?
@American Crow wait one more thing. You have the string "Sign In" in `<h2>` and further down in a `<button>` as well. Which of the two is causing the hydration error?
Spotted RailOP
no, the whole page, like I said if i change anything, even a single character in my signin component the hydration error shows up
American Crow
yea thats normal for hydration errors mine act that way too
what if you comment out the discord login button?
@American Crow what if you comment out the discord login button?
Spotted RailOP
same, tried with restarting the dev server as well
American Crow
i have no idea
Spotted RailOP
:Cry:
can middleware cause any issue?
@Spotted Rail same, tried with restarting the dev server as well
Anay-208
Is the server turbo or normal?
Spotted RailOP
whats a turbo server
Anay-208
So ya its a normal server
Spotted RailOP
yeah XD
American Crow
ye good guess so turbopack might fuck it up
just confirm if it is turbopack
by checking package.json
Spotted RailOP
ty, it is not turbo
American Crow
back to zero :q
Anay-208
Try restarting your code editor
and + the dev server
Spotted RailOP
I have literally same code in my signup form, just with some different server action imported for the signup purpose, but that thing does not have any issue
@Anay-208 Try restarting your code editor
Spotted RailOP
tried already but will do it again for u
Anay-208
lmk any updates
Spotted RailOP
@Anay-208 still same issue
Anay-208
try commenting these 3 lines.I need to know which line is exactly causing this, which could also be a function
Spotted RailOP
"use client"

import { useFormState, useFormStatus } from 'react-dom';
// import { authenticate, discordLogin } from '@/app/lib/actions';
import { useForm } from "react-hook-form";

export default function SignInForm() {
    const { register, handleSubmit, formState: { errors } } = useForm();
    // const [errorMessage, dispatch] = useFormState(authenticate, undefined);

    const action = handleSubmit(async (data) => {
        // const response = await dispatch(data);
        console.log("UserData", data);
    });

    return (
        <form /*action={action}*/>
            <h2>Signsadsd Innnnn yooooo</h2>
            <input {...register("email", { required: true })} type="email" placeholder="Email" />
            {errors.email && <span className="error">Email is required</span>}
            <input {...register("password", { required: true })} type="password" placeholder="Password" />
            {errors.password && <span className="error">Password is required</span>}
            {/* <button type="submit">Sign In</button> */}
            {/* <button type='button'>Login with Discord</button> */}
            <div
                className="flex h-8 items-end space-x-1"
                aria-live="polite"
                aria-atomic="true"
            >
                {/* {errorMessage && (
                    <>
                        <p className="text-sm text-red-500">{errorMessage}</p>
                    </>
                )} */}
            </div>
        </form>
    )
}
@Anay-208 made changes like shown in above code, same issue
Anay-208
Send the updated error
it should change as you changed content of h2
Spotted RailOP
error has gone
but HMR does not work
Anay-208
HMR?
Spotted RailOP
HMR (refresh on code change)
American Crow
hot module reload / fast refresh
Anay-208
Try uncommenting the other sign in line
do you get the err
Spotted RailOP
ok lets try that
@Anay-208 Try uncommenting the other sign in line
Spotted RailOP
the button right?
Anay-208
yes
Spotted RailOP
ok
no error
Anay-208
uncomment each line and see which one causes the error
Spotted RailOP
btw, there was a time when I thought finally the error was gone, until I was away for while, didn't even touch the code and when I came back there this above error which we are talking about
@Anay-208 the error is back when I uncomment this line: import { authenticate, discordLogin } from '@/app/lib/actions';
full code:
"use client"

import { useFormState, useFormStatus } from 'react-dom';
import { authenticate, discordLogin } from '@/app/lib/actions';
import { useForm } from "react-hook-form";

export default function SignInForm() {
    const { register, handleSubmit, formState: { errors } } = useForm();
    // const [errorMessage, dispatch] = useFormState(authenticate, undefined);

    const action = handleSubmit(async (data) => {
        // const response = await dispatch(data);
        console.log("UserData", data);
    });

    return (
        <form /*action={action}*/>
            <h2>Sign</h2>
            <input {...register("email", { required: true })} type="email" placeholder="Email" />
            {errors.email && <span className="error">Email is required</span>}
            <input {...register("password", { required: true })} type="password" placeholder="Password" />
            {errors.password && <span className="error">Password is required</span>}
            <button type="submit">Sign In</button>
            <button type='button'>Login with Discord</button>
            <div
                className="flex h-8 items-end space-x-1"
                aria-live="polite"
                aria-atomic="true"
            >
                {/* {errorMessage && (
                    <>
                        <p className="text-sm text-red-500">{errorMessage}</p>
                    </>
                )} */}
            </div>
        </form>
    )
}
Error
Anay-208
hm
Spotted RailOP
but i am also importing a server action in my signup form, I dont have any issues there :shrug:
Anay-208
So regardless of whether you are using the function or not, you are getting the err on import?
Anay-208
remove authenticate from imports, and same with discordLogin, and identify which file is causing it
Spotted RailOP
just now removed discordLogin, the error remains.
time for authenticate
Anay-208
I think the err could be due to useForm hook, or the authenticate func
@Spotted Rail just now removed `discordLogin`, the error remains. time for `authenticate`
Spotted RailOP
did the opposite, issue still persists
Anay-208
now, the next step would be to create a [min Reproduction Repository](https://nextjs-faq.com/minimal-reproduction-repository)
Spotted RailOP
that is gonna be hard for my repo
Anay-208
That will be needed to debug locally
Spotted RailOP
I will give it shot
update: I removed react-hook-form the error didn't show up for now atleast, but the HMR wont work
now I suspect it's something to do with middleware
gonna try removing that
lol im cursed, that didnt work either
@Anay-208 @American Crow I appreciate your time, I will let u know if I find the root cause, meanwhile Im gonna create a min repro
Anay-208
Alright
Spotted RailOP
@Anay-208 @American Crow Update:
I decided to restart my project with a fresh installation of every dependency and also switching to react's latest version (18.3.1), previously it was just ^18. Everything is working fine now.
Thank you once again.
Answer
Spotted RailOP
okay