next-i18next: changeLanguage cause params to undefined

Describe the bug

When I call changeLanguage all my params added from getInitialProps disappear.

Occurs in next-i18next version

“next-i18next”: “^1.1.2”,

Steps to reproduce

import React from 'react';
import {i18n, withTranslation} from '../i18n';

const _ = (
    props
) =>
{
    console.log(props);
    const t = props.t;
    const onClick = async () =>
    {
        await i18n.changeLanguage(i18n.language === 'en-US' ? 'pt-BR' : 'en-US');
    };

    return (
        <div>
            <p>{t('message')}</p>
            <button onClick={onClick}>trocar</button>
        </div>
    );
};

_.getInitialProps = async () =>
{
    return { namespacesRequired: ['common'] };
};

export default withTranslation('common')(_);

i18n.js

const NextI18Next = require('next-i18next').default;

const languages = ['pt-BR', 'en-US'];
const i18n = new NextI18Next({
    defaultLanguage: 'en-US',
    otherLanguages: ['pt-BR'],
    fallbackLng: 'en-US',
    initImmediate: false,
});
i18n.i18n.languages = languages;

module.exports = i18n;

Expected behaviour

All params remains the same.

Screenshots

https://gofile.io/?c=ISD7VA

OS (please complete the following information)

Device: Linux Mint 19.1.
Browser: Google Chrome | 76.0.3809.132 (Official Build) (64-bit)

Additional context

My userAgent param comes from express. This package: https://github.com/biggora/express-useragent

But I don’t think it’s related, because even a hard-coded param like namespacesRequired disappears.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

I’m facing this issue and can’t find to way to work around that … I don’t know if I’m doing something wrong here, I’ll try to add more precisions about the issue :

Here is where I pass my data from my Express.js backend into my prop “data” :

homeTalent.getInitialProps = async({ query }) => ({
  namespacesRequired: ['homeTalent', 'navbar', 'downloadApp', 'footer'],
  data: query,
})

On the page first load, everything works fine, and the data looks like this :
When I change the language with i18n.changeLanguage(‘en’), my data get overwritten like this :

I would appreciate any help on this issue ! Thanks

EDIT : Since this issue is the first thing found on Google, here is the solution : add shallowRender: true in your i18n config file

Slowl on May 18, 2020