cant fix hydration error

Unanswered

New Guinea Freshwater Crocodile posted this in #help-forum

New Guinea Freshwater CrocodileOP

2024-08-26T18:19:52.279Z

this is the part of the code thats having problems

<div className="animate-pulse flex space-x-4 relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px] p-5">
                    <p style={{ fontSize: '100px' }}>Fightspire</p>
                </div>

35 Replies

@New Guinea Freshwater Crocodile this is the part of the code thats having problems html <div className="animate-pulse flex space-x-4 relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px] p-5"> <p style={{ fontSize: '100px' }}>Fightspire</p> </div>

B33fb0n3

2024-08-26T18:23:28.759Z

can you remove all classes and see if you are still getting the error

@B33fb0n3 can you remove all classes and see if you are still getting the error

New Guinea Freshwater CrocodileOP

2024-08-26T18:25:36.846Z

same error

B33fb0n3

2024-08-26T18:26:27.817Z

can you share more context of the code?

@B33fb0n3 can you share more context of the code?

New Guinea Freshwater CrocodileOP

2024-08-26T18:27:52.886Z

this is the code thats not in html:

export default function Form() {

  const [isSvgVisible, setIsSvgVisible] = useState(false);
  const [code, setCode] = useState('')
  const router = useRouter();
  const [message, setMessage] = useState('');
  const searchParams = useSearchParams();
  const emailp = searchParams.get('email');
  const email = emailp || ''

  const handleClick = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSvgVisible(!isSvgVisible);

    try {
        const storedCode = await getCode(email);
        if (storedCode === code) {
            deleteCode(email)
          router.push(`/signup/confirm?email=${email}`)
        } else {
          setMessage('Invalid code');
        }
      } catch (error) {
        console.error('Error:', error);
        setMessage('Error verifying code');
      }
    };

    return (
        <div className="flex items-center justify-center min-h-screen p-4">
                <div className="animate-pulse flex space-x-4 relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px] p-5">
                    <p style={{ fontSize: '100px' }}>Fightspire</p>
                </div>

i know the error is that p because when i changed it to h1 the error also changed to h1

B33fb0n3

2024-08-26T18:29:30.434Z

yea, can you share what's the parent of the div? Like where you using Form?

@B33fb0n3 yea, can you share what's the parent of the div? Like where you using Form?

New Guinea Freshwater CrocodileOP

2024-08-26T18:31:01.883Z

Form is written in the layout.tsx, which is:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Form from "./form";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Sign up",
  description: "Sign up to Fightspire",
};

export default function Layout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en" className="h-full">
            <head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
            </head>
            <body className={`${inter.className} h-full overflow-hidden`}>
                <Form />
                {children}
            </body>
        </html>
    );
}

@New Guinea Freshwater Crocodile Form is written in the layout.tsx, which is: import type { Metadata } from "next"; import { Inter } from "next/font/google"; import Form from "./form"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Sign up", description: "Sign up to Fightspire", }; export default function Layout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en" className="h-full"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body className={`${inter.className} h-full overflow-hidden`}> <Form /> {children} </body> </html> ); }

B33fb0n3

2024-08-26T19:15:52.116Z

can you change the file name like this:

- form
+ Form

New Guinea Freshwater CrocodileOP

2024-08-26T19:16:31.872Z

wdym

B33fb0n3

2024-08-26T19:17:31.174Z

your file name is form.tsx. Change it to Form.tsx (with an uppercase first letter)

I just checked the code you shared and it seems like I can't reproduce the error that you are getting.

My work: https://codesandbox.io/p/devbox/pedantic-julien-q4pllw
Can you provide a reproduction (github or https://codesandbox.io/) so I can check this further?

Cane di Oropa

2024-08-26T19:41:23.456Z

https://discord.com/channels/752553802359505017/1277678462991077387/1277708694515355820 @New Guinea Freshwater Crocodile

@Cane di Oropa https://discord.com/channels/752553802359505017/1277678462991077387/1277708694515355820 <@1127259290663661580>

B33fb0n3

2024-08-26T19:53:25.141Z

that does not really helps, because he already removed all classes [and the error is still there](https://nextjs-forum.com/post/1277694017919778983#message-1277695463138787381). Also you can see inside [the reproduction, that I created](https://codesandbox.io/p/devbox/pedantic-julien-q4pllw), you can see, that there might be something different. It looks like a local issue. But we don't know, when OP don't talk to us

New Guinea Freshwater CrocodileOP

2024-08-26T20:00:57.584Z

this is the whole code:

@B33fb0n3 that does not really helps, because he already removed all classes [and the error is still there](https://discord.com/channels/752553802359505017/1277694017919778983/1277695463138787381). Also you can see inside [the reproduction, that I created](https://codesandbox.io/p/devbox/pedantic-julien-q4pllw), you can see, that there might be something different. It looks like a local issue. But we don't know, when OP don't talk to us

New Guinea Freshwater CrocodileOP

2024-08-26T20:04:13.724Z

the issue wasnt happening before i added useEffect then removed it a bit after

and the reproduction link not working

@New Guinea Freshwater Crocodile and the reproduction link not working

B33fb0n3

2024-08-26T20:08:48.775Z

after you are on the page click on the preview to preview it: (see attached)

@New Guinea Freshwater Crocodile the issue wasnt happening before i added useEffect then removed it a bit after

B33fb0n3

2024-08-26T20:08:59.371Z

Can you provide a reproduction (github or https://codesandbox.io/) so we can check this further?

Siamese Crocodile

2024-08-26T21:03:25.008Z

import dynamic from next/dynamic. And wrap Form with dynamic and set the ssr:false. This can solve your problem, maybe.

@B33fb0n3 after you are on the page click on the preview to preview it: (see attached)

New Guinea Freshwater CrocodileOP

2024-08-27T06:41:07.534Z

like it just kept freezing and chrome kept saying page was unresponsive

@Siamese Crocodile import dynamic from next/dynamic. And wrap Form with dynamic and set the ssr:false. This can solve your problem, maybe.

New Guinea Freshwater CrocodileOP

2024-08-27T06:41:27.602Z

i’ll try that later once i get out of bed

New Guinea Freshwater CrocodileOP

2024-08-27T09:38:39.343Z

i put all the html in a comment and now it just shows a different page’s info

New Guinea Freshwater CrocodileOP

2024-08-27T09:46:15.837Z

i kinda fixed it @B33fb0n3

it shows page content correctly but the hydration error still appears

B33fb0n3

2024-08-27T10:07:00.348Z

@Cane di Oropa@Black Caimanplease only share content, that is related to the thread from OP

@New Guinea Freshwater Crocodile i kinda fixed it <@301376057326567425>

B33fb0n3

2024-08-27T10:07:21.745Z

Give me a reproduction and I will help you further with that

Original message was deleted

joulev

2024-08-27T10:24:14.961Z

We kindly ask you to keep shitposts and such in #off-topic.

@B33fb0n3 Give me a reproduction and I will help you further with that

New Guinea Freshwater CrocodileOP

2024-08-27T10:53:04.575Z

alr gimme a few hrs and i’ll send it over (except for apis since it has hard coded info on it)

@New Guinea Freshwater Crocodile alr gimme a few hrs and i’ll send it over (except for apis since it has hard coded info on it)

B33fb0n3

2024-08-27T10:56:35.029Z

Yea, remove anything, that is not related to the error (and of course remove stuff, that you can't share). The error should be visible in the reproduction

B33fb0n3

2024-08-29T06:56:30.628Z

@New Guinea Freshwater Crocodile can you share the repro?

B33fb0n3

2024-08-31T07:43:35.613Z

@New Guinea Freshwater Crocodile ?

joulev

2024-08-31T08:14:53.504Z

maybe only one reminder is enough, questions are not required to be resolved

@B33fb0n3 <@1127259290663661580> can you share the repro?

New Guinea Freshwater CrocodileOP

2024-09-01T07:15:35.136Z