Can't seem to make Remix and remix-i18next work in production

[GregoryHue]

I'm trying to make a website using Remix with remix-i18next, which seems to be the only i18n implementation for Remix. I'm also using React 18.2.0. While working locally, everything works fine but when deploy it to Netlify, I get several errors (I'll let you check out the links yourself):

• Error: Minified React error # 418; visit https://reactjs.org/docs/error-decoder.html?invariant=418
• Uncaught Error: Minified React error # 425; visit https://reactjs.org/docs/error-decoder.html?invariant=425
• Uncaught Error: Minified React error # 418; visit https://reactjs.org/docs/error-decoder.html?invariant=418
• Uncaught Error: Minified React error # 423; visit https://reactjs.org/docs/error-decoder.html?invariant=423

It doesn't necessarily break the website for now but i'm quite sure that would be problematic later on, as it is related to hydration in React.

I was wondering what part of my stack was the problem so I restarted from the beginning by implementing things and deploying to Netlify in this order:

1. Start a Remix project without template
2. Adding Prisma and making a request from Supabase
3. Adding Material UI
4. Adding Sass
5. Adding remix-i18next

It's only after deploying the 5th steps that those errors appears.

I've searched around a bit and came across this #2570, which recommends to downgrade to React 17 (and use hydrate instead of hydrateRoot) but by doing so, you can no longer implement remix-i18next. I'd like to point out this comment that has many thumbs up, stating "This issue still happens with React 18.2.0". The comment was posted on Jul 16th, 2022 and the issue was closed on Oct 17, 2022.

I find it very disappointing that an issue like this not only hasn't still gotten resolved, but also got closed with a terrible answer as a solution. Downgrade from a stable version to a less stable version does not sound like a fix to me.

The bottom line is that if anyone has a solution, I'd like to hear it.

Edit : I'd like to hear opinons as well, regarding #2570, am I an idiot for thinking that this should not have been closed ?

[sergiodxa]

downgrade to React 17 (and use hydrate instead of hydrateRoot) but by doing so, you can no longer implement remix-i18next

remix-i18next works perfectly with React 17, almost nothing there depends on React anyway, only one hook

[sergiodxa]

The errors you got means your server rendered HTML is not the same than your client rendered DOM, this can be caused by many reasons.

If you use Intl API to formate dates the timezone of your server can be different than the timezone of the browser.

In remix-i18next in particular, what could be happening is that the backend you used to load your translations files couldn't find the files on your server, this can then cause the keys to be rendered in the HTML as fallback which would later be replaced by the correct translations on the browser, causing a hydration error.

You can verify if that's your issue by disabling JS on your browser, if you get your i18n keys instead of the actual texts then something is wrong with your i18next backend configuration, most likely the path used find the translations when the app is deployed on production.