gatsby-plugin-react-i18next icon indicating copy to clipboard operation
gatsby-plugin-react-i18next copied to clipboard

SSR hydration error with redirect: true

Open aureldussauge opened this issue 1 year ago • 4 comments

How to reproduce :

  • Clone this minimal project https://github.com/aureldussauge/gatsby-error-i18n
  • Run npm start
  • Configure your browser to have french as default language
  • Go to localhost:8000/

The redirection is causing a hydration error image

aureldussauge avatar Mar 16 '23 13:03 aureldussauge

Is it because the language is only checked at browser-side, so the redirect isn't detected at server-side then Gatsby sees a difference between the server-rendered page (/) and the actual page (/fr) ?

aureldussauge avatar Mar 16 '23 14:03 aureldussauge

Same issue.

After switching the language from the main language (for example, thewebsite.com), it will now redirect me to thewebsite.com/es/ for example. Now when the second language is remembered as a choice, when If I try to access the website directly typing its URL (thewebsite.com) without language path, it gives 2 errors Error #418 and Error #423:

react-dom.production.min.js:132 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at fa (react-dom.production.min.js:132:198)
    at qu (react-dom.production.min.js:226:193)
    at ks (react-dom.production.min.js:281:85)
    at bs (react-dom.production.min.js:280:450)
    at vs (react-dom.production.min.js:280:320)
    at gs (react-dom.production.min.js:280:180)
    at ls (react-dom.production.min.js:268:209)
    at S (scheduler.production.min.js:13:203)
    at MessagePort.T (scheduler.production.min.js:14:128)
fa @ react-dom.production.min.js:132
qu @ react-dom.production.min.js:226
ks @ react-dom.production.min.js:281
bs @ react-dom.production.min.js:280
vs @ react-dom.production.min.js:280
gs @ react-dom.production.min.js:280
ls @ react-dom.production.min.js:268
S @ scheduler.production.min.js:13
T @ scheduler.production.min.js:14
react-dom.production.min.js:293 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at xi (react-dom.production.min.js:293:39)
    at bs (react-dom.production.min.js:280:389)
    at vs (react-dom.production.min.js:280:320)
    at gs (react-dom.production.min.js:280:180)
    at as (react-dom.production.min.js:271:88)
    at ls (react-dom.production.min.js:268:429)
    at S (scheduler.production.min.js:13:203)
    at MessagePort.T (scheduler.production.min.js:14:128)

madfcat avatar Jun 14 '23 03:06 madfcat

I'm also experience this.

grgcnnr avatar Aug 24 '23 00:08 grgcnnr

I’m still having the same issue.

Binibeno avatar Apr 15 '24 12:04 Binibeno