Next redux wrapper incompatible with next-i18next

[Jiang]

Describe the bug

When I am trying use next-i18next for internationalizating, I am facing a error TypeError: Cannot read properties of undefined (reading '_nextI18Next'), I researched and found the problem come from next-redux-wrapper. That are incompatible when using together. This error occurred if I put wrapper.getInitialPageProps() in getInitialProps/gSSP/gSP.

My code not work:

import { appWithTranslation } from 'next-i18next';
import { wrapper } from './store';


function App({ Component, ...pageProps }) {

    const { store, props } = wrapper.useWrappedStore(pageProps);

    return (
        <Provider store={store}>
               <Component {...props.pageProps} />
        </Provider>
    );
}

App.getInitialProps = wrapper.getInitialPageProps((store) => async (context) => {
    return {
        pageProps: {
            ...pageProps,
        },
    };
});

export default appWithTranslation(App);

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version latest

[Jiang]

The temporary solution for now is using wrapper.withRedux() HOC:

export default wrapper.withRedux(appWithTranslation(App));
But it seems withRedux() is no longer recommended. I see this warning in console:
You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore()

[Jiang]

@kirill-konshin What is your solution to solve that problem?

[Jiang]

@voinik Hello my friend, thoughts ?

[voinik]

@phatify Hi! I don’t have my laptop with me atm so I can’t test anything. However: You should use wrapper.getInitialAppProps and not wrapper.getInitialPageProps for your main App component. Why are you using it like this?

[Jiang]

@voinik please forgive for my mistake 😁. It was a mistake with suggest code of IDE Visual Studio Code 😆 but it doesn't seem to have resolved the situation yet.

[Jiang]

@voinik

[voinik]

@phatify I copy pasted the store.ts file and the pages directory from the /packages/demo-redux-toolkit directory into a new next project, and in _app.tsx I put export default appWithTranslation(App);, and everything works fine. I can't reproduce your issue. Can see if you can get it to work by doing the same?

[Jiang]

@voinik you can give me an example repo ?

[voinik]

@phatify Sure, here https://github.com/voinik/next-i18next-redux-wrapper

[Jiang]

@phatify Sure, here https://github.com/voinik/next-i18next-redux-wrapper

@voinik thanks a lot 😁😝😝😝😝😝😝😝😝😝