How to fix this Hydration Error (post Localization Implementation) | Next.js | Page 1

hybrid grove Dec 28, 2023, 12:51 PM

#

I had to update my page.tsx / layout.tsx and my middleware file in order to implement translation for my website.

Now I get this error but the page loads and the translation works.

Does anyone know what could cause this issue ?

#

Code for the logo component:

// RiveLogo.tsx
'use client';
import { useRive } from '@rive-app/react-canvas';
import { useTheme } from 'next-themes';

function RiveLogoComponent(props: { src: string }) {
  const { RiveComponent } = useRive({
    src: props.src,
    autoplay: true,
  });

  return <RiveComponent />;
}

const RiveLogo = () => {
  const { resolvedTheme } = useTheme();
  console.log("Current theme:", resolvedTheme); // Log the current theme
  const logoSrc = resolvedTheme === 'dark' 
    ? "/JobsBringerLogoDarkAnimated.riv" 
    : "/JobsBringerLogoLightAnimated.riv";

  return (
    <div style={{ width: '300px', height: '300px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <RiveLogoComponent key={resolvedTheme} src={logoSrc} />
    </div>
  );
};

export default RiveLogo;

#

And on my log-in page I import it like this:

import RiveLogo from '../../../components/RiveLogo';
 <div className="flex flex-col items-center justify-center w-full px-8 sm:max-w-md">
          <RiveLogo />

burnt laurel Dec 28, 2023, 1:07 PM

#

hybrid grove Code for the logo component: ```js // RiveLogo.tsx 'use client'; import { useRi...

are you sure the paths are correct

#

for the logos

hybrid grove Dec 28, 2023, 1:07 PM

#

Hmm I can share the relative paths here:

app/[lang]/login/page.tsx
components/RiveLogo.tsx

burnt laurel Dec 28, 2023, 1:08 PM

#

i mean image paths

#

and are you sure the file extension is .riv and not .rive

hybrid grove Dec 28, 2023, 1:08 PM

#

burnt laurel are you sure the paths are correct

Oh yeah, definitely. I didn't change those and they worked before.

#

The logo worked just fine before implementing this localization functionality

#

I didn't get hydration errors either

burnt laurel Dec 28, 2023, 1:09 PM

#

i think its file paths issue

#

in this case

#

yep, it surely is

hybrid grove Dec 28, 2023, 1:09 PM

#

public/JobsBringerLogoDarkAnimated.riv

I mean here is the path

burnt laurel Dec 28, 2023, 1:10 PM

#

hybrid grove public/JobsBringerLogoDarkAnimated.riv I mean here is the path

if it would be a app/login, then /JobsBringerLogoDarkAnimated.riv would be fine, but since its app/[lang]/login

hybrid grove Dec 28, 2023, 1:10 PM

#

I didn't change it or anything, why it wouldn't work all of a sudden

burnt laurel Dec 28, 2023, 1:10 PM

#

then it should be

#

'../JobsBringerLogoDarkAnimated.riv'

#

or './JobsBringerLogoDarkAnimated.riv'

#

not quite sure

#

'/../JobsBringerLogoDarkAnimated.riv' maybe

hybrid grove Dec 28, 2023, 1:11 PM

#

import RiveLogo from '../../../components/RiveLogo';

#

This is how I have it right now

burnt laurel Dec 28, 2023, 1:11 PM

#

i mean here

hybrid grove Dec 28, 2023, 1:12 PM

#

That is correct because that didn't change

burnt laurel Dec 28, 2023, 1:12 PM

#

i have no idea then honestly, ask an ai i guess and provide file structure

hybrid grove Dec 28, 2023, 1:12 PM

#

burnt laurel Dec 28, 2023, 1:13 PM

#

ohh

hybrid grove Dec 28, 2023, 1:13 PM

#

See, the components folder has nothing to do with my app folder

burnt laurel Dec 28, 2023, 1:13 PM

#

it should be /icons/JobsBringerLogoDarkAnimated.riv

hybrid grove Dec 28, 2023, 1:13 PM

#

It's not inside the icons folder either

#

If you look closely

burnt laurel Dec 28, 2023, 1:13 PM

#

oh yes

hybrid grove Dec 28, 2023, 1:13 PM

#

It's directly inside the public folder 😄

burnt laurel Dec 28, 2023, 1:14 PM

#

hybrid grove It's directly inside the public folder 😄

maybe try console logging the src prop

#

to see if its correct

hybrid grove Dec 28, 2023, 1:15 PM

#

I think the issue may be here

#

Since I didn't update the path but for some reason it doesn't show any errors

#

And if I try to update it with someting else it gives error

burnt laurel Dec 28, 2023, 1:15 PM

#

hybrid grove I think the issue may be here

delete this line and import it like this maybe

#

so vs code may choose path instead of you

hybrid grove Dec 28, 2023, 1:16 PM

#

burnt laurel delete this line and import it like this maybe

It did!

burnt laurel Dec 28, 2023, 1:17 PM

#

now does it work?

hybrid grove Dec 28, 2023, 1:17 PM

#

No, I even restarted the server

burnt laurel Dec 28, 2023, 1:18 PM

#

i dont know what to do then, maybe try checking your old code to find the solution

#

before you added [lang]

hybrid grove Dec 28, 2023, 1:18 PM

#

Hmm, for the login page at least even if I use the old code it won't load the logo

#

The issue must be coming from another page then

#

either layout or page.tsx

burnt laurel Dec 28, 2023, 1:19 PM

#

i guess thats it

hybrid grove Dec 28, 2023, 1:23 PM

#

I replaced those files too and reloaded the website, still the same even without that hydration error.

hybrid grove Dec 28, 2023, 1:43 PM

#

#How to fix this Hydration Error (post Localization Implementation)