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
Mirardes
Mirardes9mo ago
@core-team do you have any idea ? Yes no problem
Mirardes
Mirardes9mo ago
GitHub
GitHub - qlaffont/solid-start-issue-rosetty
Contribute to qlaffont/solid-start-issue-rosetty development by creating an account on GitHub.
Mirardes
Mirardes9mo 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
davedbase9mo 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.
Mirardes
Mirardes9mo 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
davedbase9mo 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?
Mirardes
Mirardes9mo 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
lxsmnsyc9mo 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
Mirardes
Mirardes9mo ago
I have make a reproduction for all issues i have open if needed reproduction ⬆️
lxsmnsyc
lxsmnsyc9mo 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
davedbase9mo ago
PS. thanks Alexis. You da best
Mirardes
Mirardes9mo 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
lxsmnsyc9mo 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
Mirardes
Mirardes9mo ago
did you have any time to work on it ? 🙂
lxsmnsyc
lxsmnsyc8mo 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
lxsmnsyc8mo 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
No description
lxsmnsyc
lxsmnsyc8mo ago
which kinda proves my statement I'd like to recommend marking SolidJS as a peerDependency in rosetty-solid
lxsmnsyc
lxsmnsyc8mo 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.
Mirardes
Mirardes8mo 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 !
Mirardes
Mirardes8mo 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
No description
Mirardes
Mirardes8mo ago
As you can see the translation is set so it's very weird
lxsmnsyc
lxsmnsyc8mo ago
seems to be an error in both?
Mirardes
Mirardes8mo ago
It's very strange I don't understand it because he render the translation so it's seems to be fill
lxsmnsyc
lxsmnsyc8mo ago
I'll get back to you later, I'm currently not with my laptop
Mirardes
Mirardes8mo ago
Yes no problem thanks for your help ! any update ? 🙂
lxsmnsyc
lxsmnsyc8mo 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?
Mirardes
Mirardes8mo ago
yes exactly
lxsmnsyc
lxsmnsyc8mo ago
@Mirardes is this the solid-start-cmp repo?
Want results from more Discord servers?
Add your server
More Posts
Prevent a route component from running before the old routes `onCleanup` runsWhen I move from one page to another with the router, the flow seems to be: on `PageA` -> trigger mError: Hydration Mismatch with component from node_modulesHello, I have an issue with Solid-Start Hydration process. Everything is described on the github isBundled package breaks when used in PRODI am working on a package which provides hooks and components to be used in a Solid app. The packageBug with `solid-js/store` and `solid-primitives/history`I ran into a bug and reproduced it in this stackblitz. For some reason with this configuration of thClicking browser's Back button from external site doesn't render the right state**The problem occurs only in production, not in localhost.** When a user is redirected to an externhydration mismatch when wrapping component in a suspenseI am trying to render a loading ui when data is being collected on the server: ```tsx function Sectigetting route parameters seversideIs there a way to obtain route parameters on the serversides? I know that we can use useParam on tI can't seem to get ref bindings correctlyI'm trying to implement spatial-navigation in my app so I want to convert this package from Reactjs Running a script in a solid start projectHi, I'd like to run a script, to seed my db, in a solid start project. I thought id just be able to whats the use case of routeData and useRouteDataFrom my understanding, it seems possible to directly get the data needed using ‘createServerData$’ t