SSR broken in latest version of NextJS when setting locale manually #156

andycansdale · 2022-12-22T15:45:31Z

When trying to load translations on the server side from within getServerSideProps, the props are loaded into the store, but fail to be applied to the html. When the client takes over, the translations are loaded. This also causes a mismatch error when fallbackLng is set to supportedLngs as in the example.

The issue is present in a fresh vanilla NextJS installation with files as follows:

pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { appWithI18Next, useSyncLanguage } from 'ni18n'
import { ni18nConfig } from '../ni18n.config'

const App = ({ Component, pageProps }: AppProps) => {
  useSyncLanguage('en')
  return <Component {...pageProps} />
}

export default appWithI18Next(App, ni18nConfig)

ni18n.config.ts

import type { Ni18nOptions } from 'ni18n'

const supportedLngs = ['es', 'en']

export const ni18nConfig: Ni18nOptions = {
  fallbackLng: supportedLngs,
  supportedLngs,
  ns: ['translation'],
  react: {
    useSuspense: false,
  },
}

pages/index.tsx

import Head from 'next/head'
import { useTranslation } from 'react-i18next'
import { loadTranslations } from 'ni18n'
import { ni18nConfig } from '../ni18n.config'
import { GetServerSideProps } from 'next'

export default function Home() {
  const { t } = useTranslation()
  return (
    <>
      <Head>
        <title>Test nI18n</title>
      </Head>
      <main>
        <div>
          <p>Hello!</p>
          <p>{t('key')}</p>
        </div>
      </main>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async (props) => {  
  return {
    props: {
      ...(await loadTranslations(ni18nConfig, props.locale, ['translation']))
    }
  }
}

It's worth noting that the prop ni18n_server is being loaded with the translations, but whatever I try, I've not been able to get SSR to pick them up.

__ni18n_server__: { resources: { es: [Object], en: [Object] }, ns: [ 'translation' ] }

As can be seen here, the SSR response shows 'key' instead of the text 'Translation in English'. Once the client takes over, the translation is corrected in the view and the error is displayed.

package.json as follows:

{
  "name": "n18n",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.0.7",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "i18next": "^22.4.6",
    "next": "13.0.7",
    "ni18n": "^1.0.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^12.1.1",
    "typescript": "4.9.4"
  }
}

The text was updated successfully, but these errors were encountered:

willjunx · 2023-01-03T07:49:21Z

Try to downgrade your react-i18next@^12.1.1 into react-i18next@^12.0.0

bombillazo · 2023-03-29T20:27:56Z

Having this problem as well. Were you able to fix this, @andycansdale?

Update

Seems like @QuickAmethyst 's suggestion worked. @JCQuintas looks like there is a specific dependency version requirement with react-i18next to make it properly work with this library.

vladislavdev58 · 2023-04-04T19:21:06Z

@bombillazo can you send your package.json ?

bombillazo · 2023-04-04T19:54:10Z

@vladislavdev58 just install the dependency with the exact version

    "react-i18next": "12.0.0",

Check the CHANGELOG for that package to see if it doesnt affect you having an older version from the latest one.

It would be interesting to see which version broke the compatibility...

vladislavdev58 · 2023-04-04T20:55:16Z

@bombillazo thanks, I had with ^
I am passing Spanish in loadTranslations and English is displayed. I am using the approach from the example - https://github.com/JCQuintas/ni18n/blob/main/examples/simple/pages/server-side-props.js. Was there such a problem?
Did you use useSyncLanguage?

velidan · 2023-04-09T16:33:13Z

I had exactly the same error and I just used the @bombillazo suggestion, use the exact version of the react-i18next.
"react-i18next": "12.0.0",

Thank you!

P.S. But I think it's a temporary solution because the react-i18next will continue to growing if the next.js will change API later

bombillazo · 2023-04-17T22:42:39Z

It seems someone reported a related problem in the react-i18next repo, possibly caused by the same bug. 👀
i18next/react-i18next#1629

JCQuintas · 2023-04-20T22:41:01Z

Hi, as far as I can tell this seems to have been caused by a version of i18next. Make sure you are using the latest versions below. I won't add these to peerDependencies just now because it would be a breaking change, and I need more time to research.

    "i18next": ">=22.0.0",
    "react-i18next": ">= 12.0.0"

bombillazo · 2023-04-21T13:23:18Z

Make sure you are using the latest versions below.
    "react-i18next": ">= 12.0.0"

Hey JC. Unfortunately, using any version greater than [email protected] causes the problem. I am on the latest version of i18next with [email protected] and this was the only way to get it to work. I recommend using the exact version while the bug is fixed.

JCQuintas · 2023-04-21T13:41:08Z

Sorry, I misread, this is happening in development only. I was testing in production. Will try to debug it then

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR broken in latest version of NextJS when setting locale manually #156

SSR broken in latest version of NextJS when setting locale manually #156

andycansdale commented Dec 22, 2022 •

edited

Loading

willjunx commented Jan 3, 2023

bombillazo commented Mar 29, 2023 •

edited

Loading

vladislavdev58 commented Apr 4, 2023

bombillazo commented Apr 4, 2023 •

edited

Loading

vladislavdev58 commented Apr 4, 2023

velidan commented Apr 9, 2023 •

edited

Loading

bombillazo commented Apr 17, 2023 •

edited

Loading

JCQuintas commented Apr 20, 2023

bombillazo commented Apr 21, 2023

JCQuintas commented Apr 21, 2023

SSR broken in latest version of NextJS when setting locale manually #156

SSR broken in latest version of NextJS when setting locale manually #156

Comments

andycansdale commented Dec 22, 2022 • edited Loading

willjunx commented Jan 3, 2023

bombillazo commented Mar 29, 2023 • edited Loading

vladislavdev58 commented Apr 4, 2023

bombillazo commented Apr 4, 2023 • edited Loading

vladislavdev58 commented Apr 4, 2023

velidan commented Apr 9, 2023 • edited Loading

bombillazo commented Apr 17, 2023 • edited Loading

JCQuintas commented Apr 20, 2023

bombillazo commented Apr 21, 2023

JCQuintas commented Apr 21, 2023

andycansdale commented Dec 22, 2022 •

edited

Loading

bombillazo commented Mar 29, 2023 •

edited

Loading

bombillazo commented Apr 4, 2023 •

edited

Loading

velidan commented Apr 9, 2023 •

edited

Loading

bombillazo commented Apr 17, 2023 •

edited

Loading