No translations during fallback rendering (v2.0.2)

[stpch]

What version of this package are you using? 2.0.2

What operating system, Node.js, and npm version? OS: Windows 10 Node.js: v18.14.0 npm: v9.4.2

What happened? When router.isFallback === true translations don't seem to load and the translation key is output instead.

What did you expect to happen? Translations working during fallback rendering. It works in the latest 1.x version.

Are you willing to submit a pull request to fix this bug? No (would take too long)

--

Minimal example that works in v1.x but doesn't in v2.0.2:

import { useRouter } from 'next/router'
import useTranslation from 'next-translate/useTranslation'

const TestPage = () => {
    const { t } = useTranslation()
    const { isFallback } = useRouter()

    return <div>{isFallback ? t('someTranslationKey') : 'No fallback rendering' }</div>
}

[aralroca]

Would you create a minimal repo that reproduces this issue? Thank you

[stpch]

Hi @aralroca,

Sorry for the long wait. I added a minimal example replicating the described bug at https://github.com/stpch/next-translate-bug.

Follow these steps to reproduce:

1. git clone https://github.com/stpch/next-translate-bug.git
2. npm i inside cloned directory
3. npm run dev
4. Open http://localhost:3000/foo in your browser

The page outputs a test translation with the key common:test as well as the fallback rendering flag and current URL parameter.

By repeatedly refreshing the page, you can briefly see the initial fallback rendering output as:

Translation: common:test
Fallback rendering: true
Page URL param:

Then the non-fallback rendering shows as:

Translation: This is a test translation
Fallback rendering: false
Page URL param: foo