with-react-i18next doesn't load translations for nested components from namespace not specified in parent page component

[Yankovsky]

Examples bug report

Example name

with-react-i18next

Describe the bug

If nested component uses namespace that is not specified in parent page component, than translation is not loaded on server side.
I've pushed code with bug reproduction here Yankovsky@d0d5f18

Also, I've recorded videos:

En language http://s.csssr.ru/U02D248T6/2018-09-28-1757-3wa83v4ypq.mp4
Notice how it works correctly if I start navigation from home page, but translations for home namespace don't load if I start from page2.

For de language slightly different situation. For this example I've changed links so they include ?lng=de param. From home page to page2 http://s.csssr.ru/U02D248T6/2018-09-28-1804-c1hs5sucpa.mp4 Notice, that for some reason en language for page2 was downloaded.
From page2 to home http://s.csssr.ru/U02D248T6/2018-09-28-1805-1zvklg3at4.mp4 Notice flickering and downloading of home.json.

To Reproduce

Check the code above.
Or you can just change ExtendedComponent from example to:

import React from 'react'
import { translate } from 'react-i18next'

function MyComponent ({ t }) {
  return <p>{t('home:sample_button')}</p>
}

const Extended = translate('home')(MyComponent)

export default Extended

Here I changed translation from using common namespace to home namespace. Now try to open page2, translations don't work.

Expected behavior

Provide translations for all namespaces for all components on the page. Side bugs like flickering or unnecessary json download are fixed.

System information

• OS: macOS
• Browser: chrome
• Version of Next.js: 7.0.0

[Yankovsky]

Please tell me if you need more information.

[Yankovsky]

@jamuhl ^

[jamuhl]

@Yankovsky thank you for providing all this for reproduction - just my time is limited too - and as I do not use next.js personally my know-how and personal interest to sink additional time into it is limited.

[jamuhl]

if i see it right only the outer page level withI18next using page defines which namespaces get passed down to clients. => https://github.com/Yankovsky/next.js/blob/d0d5f180227ec8a12476aefdbd79c476cf820914/examples/with-react-i18next/lib/withI18next.js#L15

if you need more control (adding namespaces from inner components) you might need to write some extra glueing code using the reportNS function: i18next/react-i18next#500

so i guess this is not an issue - just a limitation / simplification of the sample needing all namespaces defined on the most outer page level component

[jamuhl]

beside that...https://github.com/i18next/react-i18next/tree/master/example/nextjs just updated the code to use react-i18next v8.0.6

[jamuhl]

that is now added in the react-i18next sample here:

https://github.com/i18next/react-i18next/tree/master/example/nextjs

for details: i18next/react-i18next@798a57c#diff-9602e74119895f686d6b8ce306ef5488R20

[jamuhl]

@timneutkens i will merge the sample in the react-i18next repository back as soon i got some feedback it runs stable with the new features:

• reporting those namespaces in inner components (discussed in this issue)
• allow for paths including the language, eg. /en/page1 (like requested here: Multi Language Support with Custom Page Directories #5348)

guess this could be closed for now.

[timneutkens]

Okay let's close it 👍