next_i18_next undefined when i naviagate to another route

2 years ago

#45479

reza47

I m working on a project with nextjs and I use the next_i18_next library for localization, I m getting an undefined error when I try to navigate to another route.

Cannot read properties of undefined (reading '_nextI18Next')
    at AppWithTranslation (/home/rgo/projects/inbo-panel-front/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:90:29)
    at processChild (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/home/rgo/projects/inbo-panel-front/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/home/rgo/projects/inbo-panel-front/node_modules/next/dist/server/render.js:686:46)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.tsx:126:26)
    at Object.defaultGetInitialProps (/home/rgo/projects/inbo-panel-front/node_modules/next/dist/server/render.js:316:51)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:191:16)

when I declare a new page if I don't have getStaticProps or getServerSideProps declared I get this error even if I don't use translation hook. and when I try to go to the route that doesn't exist instead of the 404 page I get this error.

this is my next-i18next.config.js file:

module.exports = {
    i18n: {
        defaultLocale: 'fa',
        locales: ['fa','en'],
        defaultNS:['fa'],
        debug:true,
        autoMode:false,
        browserLanguageDetection: false,

    }
}

and this is my next.config.js:

  const {i18n} = require('./next-i18next.config');
    
    module.exports = {
        i18n,
        reactStrictMode: true,
        webpack(config) {
            config.module.rules.push({
                test: /\.svg$/,
                use: ["@svgr/webpack"]
            });
    
            return config;
        },
        future: {webpack5: true}
    
    }

and my _app.tsx:

const App = (props: MyAppProps) => {
    const {
        Component,
        emotionCache = clientSideEmotionCache,
        pageProps,
    } = props;
    return (
        <CacheProvider value={emotionCache}>
            <Head>
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1.0, user-scalable=no"
                />
            </Head>

            <ThemeProvider theme={getTheme(theme)}>
                <CssBaseline />
                <Component {...pageProps} />
            </ThemeProvider>
        </CacheProvider>
    );
};

export default appWithTranslation(App) ;

am I doing something wrong in my configurations? I tried to create a 404 page but I can't declare getStaticProps or getServerSideProps there. the library work but i must declare the props function and provide the namespace and file to the props like this :

export const getStaticProps: GetStaticProps = async (context) => {

    return {
        props: {
            ...(await serverSideTranslations(context.locale as string, ['common', 'login'])),
            fallback: false
        }
    };
}

but when I try to navigate to a route that doesn't need to be translated or doesn't exist I get the above error and in the none existed case I don't get a 404 page and get the undefined error.

reactjs

next.js

i18next

next-i18next

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs