SolidJS•13mo ago

Error: Hydration Mismatch

Hello, I have an error with one of my plugin. I have always an issue with Hydration MisMatch. Can some one help me please ? https://github.com/qlaffont/rosetty-solid/blob/master/src/index.tsx

GitHub

rosetty-solid/src/index.tsx at master · qlaffont/rosetty-solid

Complete Intl/I18n solution for Solid . Contribute to qlaffont/rosetty-solid development by creating an account on GitHub.

28 Replies

MirardesOP•13mo ago

@core-team do you have any idea ? Yes no problem

MirardesOP•13mo ago

@Toka https://github.com/qlaffont/solid-start-issue-rosetty

GitHub

GitHub - qlaffont/solid-start-issue-rosetty

Contribute to qlaffont/solid-start-issue-rosetty development by creating an account on GitHub.

MirardesOP•13mo ago

not at all I have try this morning euh Strange I have updated the package.json and for me is not working I push the update on the repo So @Toka what did you do to fix it 0-o x) thanks for your help ! yes same issue with my other discord issue there is an issue with SSR and i have visibly no answer or clue to fix it ping core member dit nothing :/ and open github issue neither ... not at all in fact :/ @core-team can we have you help on this issue :/ ?

davedbase•13mo ago

Hi @Mirardes. Very sorry that core members haven't gotten back to you. We try to support questions like this as often as we can but everyone's stretched very thin rn. Let me ask around and see if we can get someone's time to help.

MirardesOP•13mo ago

thank you ! Two of my issues are critical because actually i'm making a transition in my company to use SolidJS and i want to understand the issue to fix it and help others in my company

davedbase•13mo ago

Absolutely, we're here to help smoothen that effort...just bear with us. There's a LOT happening atm @lxsmnsyc 🤖 sorry to ping you but do you happen to have a few minutes for our community member?

MirardesOP•13mo ago

Thank you ! And I know that you guys are making a lot of thing between solid, solid primitives and solid start ! I just want to applause you for all your works ! the other issue is here if needed : https://discord.com/channels/722131463138705510/1171032087864803348

lxsmnsyc•13mo ago

Probably the closest would be to know the hydration key that was shown in the logs then map it to the closest element in the Elements panel with the data-hk attribute

MirardesOP•13mo ago

I have make a reproduction for all issues i have open if needed reproduction ⬆️

lxsmnsyc•13mo ago

It's most likely the locale. it's probably picking up differently from the default locale. I can be wrong. I'm not sure what's the implementation of rosetty The cause would be in the following steps: - page renders on the server with the fr locale - page is sent on the client - client starts hydrating - client doesn't pick up from the default locale during hydration, instead, it renders with the locale detected from the user This line: https://github.com/qlaffont/rosetty-solid/blob/master/src/index.tsx#L22 although still, since I'm not sure the entire implementation I can't say if there's any behavior for rosetty that differs between the server and client

davedbase•13mo ago

PS. thanks Alexis. You da best

MirardesOP•13mo ago

In fact it is the same local actually I was thinking of that but if you check the reproduction you will see that we use only one language

lxsmnsyc•13mo ago

I'll try running the repro on my laptop tomorrow. I currently have it turned off and it's a bit late for me

MirardesOP•13mo ago

did you have any time to work on it ? 🙂

lxsmnsyc•13mo ago

haven't yet, will pick it up later okay I've just tested it out (sorry for the delay) I've tried removing the usei18n on the Main page

export default function Home() {
  // const i18n = useI18n();

  console.log(createUniqueId())

  return (
    <main class="text-center mx-auto text-gray-700 p-4">
      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">
        {/* {i18n.t('test')} */}
      </h1>
    </main>
  );
}

export default function Home() {
  // const i18n = useI18n();

  console.log(createUniqueId())

  return (
    <main class="text-center mx-auto text-gray-700 p-4">
      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">
        {/* {i18n.t('test')} */}
      </h1>
    </main>
  );
}

and it still seems to be causing issues.

lxsmnsyc•13mo ago

So I tried commenting out the RosettyProvider, and the hydration error was gone. So I had to go through your package rosetty-solid to check some leads, and I think one of the main issues is this: https://github.com/qlaffont/rosetty-solid/blob/764b75e2af878748413d696c053642265ff2188e/package.json#L106C6-L109 SolidJS is marked as a dependency, which most likely leads to package duplicates (a common mistake in library authors). I tested this by adding a createUniqueId call to the RosettyProvider (through the build output) and displayed this

lxsmnsyc•13mo ago

which kinda proves my statement I'd like to recommend marking SolidJS as a peerDependency in rosetty-solid

lxsmnsyc•13mo ago

bonus: I'd also not recommend TSDX (not just in SolidJS, but in general). The tool has been abandoned for many years and has a lot of broken stuff in it. I'd recommend tsup as an alternative, we also have a preset for it: https://github.com/solidjs-community/tsup-preset-solid

GitHub

GitHub - solidjs-community/tsup-preset-solid: Preset for building y...

Preset for building your SolidJS packages with tsup. - GitHub - solidjs-community/tsup-preset-solid: Preset for building your SolidJS packages with tsup.

MirardesOP•13mo ago

Okay thanks you ! I will check that tomorrow and i will keep you in touch ! @lxsmnsyc 🤖 do you think you have a time for another hydration issue ? It's a complete different case and i have no clue too : https://discord.com/channels/722131463138705510/1171032087864803348 @lxsmnsyc 🤖 Thanks it works I close the post and I keep the other post !

MirardesOP•13mo ago

Finally I'm not closing it @lxsmnsyc 🤖 it seems that useContext failed on server and not in client. I have an error with no value in context + hydration issue

MirardesOP•13mo ago

As you can see the translation is set so it's very weird

lxsmnsyc•13mo ago

seems to be an error in both?

MirardesOP•13mo ago

It's very strange I don't understand it because he render the translation so it's seems to be fill

lxsmnsyc•13mo ago

I'll get back to you later, I'm currently not with my laptop

MirardesOP•13mo ago

Yes no problem thanks for your help ! any update ? 🙂

lxsmnsyc•13mo ago

not yet. haven't tried anything since I got to fix some other issue. I would assume this is still the same repo we are talking about?

MirardesOP•13mo ago

yes exactly

lxsmnsyc•13mo ago

@Mirardes is this the solid-start-cmp repo?

Gaming

Programming

Error: Hydration Mismatch