Warning ["not declared namespacesRequired array"] is happening even if name spaces is declared

Describe the bug

I’ve been receiving this warning for all pages on console when I run the server.

You have not declared a namespacesRequired array on your page-level component: withI18nextTranslation(HomePage). This will cause all namespaces to be sent down to the client, possibly negatively impacting the performance of your app. For more info, see: https://github.com/isaachinman/next-i18next#4-declaring-namespace-dependencies

My locales:

| - public
|  | - static
|  |  | - locales
|  |  |  | - en
|  |  |  |  | - common.json
|  |  |  |  | - home.json
|  |  |  | - pt
|  |  |  |  | - common.json
|  |  |  |  | - home.json

I created the server.js

const express = require('express');
const next = require('next');
const nextI18NextMiddleware = require('next-i18next/middleware').default;

const nextI18next = require('./i18n');

const port = process.env.PORT || 3000;
const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handle = app.getRequestHandler();

(async () => {
    await app.prepare();
    const server = express();

    await nextI18next.initPromise;
    server.use(nextI18NextMiddleware(nextI18next));

    server.get('*', (req, res) => handle(req, res));

    await server.listen(port);
    // eslint-disable-next-line no-console
    console.log(`> Ready on http://localhost:${port}`);
})();

i18n.js

const NextI18Next = require('next-i18next').default;
const { initReactI18next } = require('react-i18next');

module.exports = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['en', 'pt'],
  use: [initReactI18next],
  localeSubpaths: {
    en: 'en',
    pt: 'pt',
  },
});

It’s my _app.js:

import React, { useEffect } from 'react';
import { func, object } from 'prop-types';
import Router from 'next/router';
import { ThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider as SCThemeProvider } from 'styled-components';

import { appWithTranslation } from '../i18n';
import * as gtag from '../utils/gtag';
import muiTheme from '../styles/theme';
import GlobalStyle from '../styles/GlobalStyle';

Router.events.on('routeChangeComplete', (url) => gtag.pageview(url));

const MyApp = ({ Component, pageProps }) => {
  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <SCThemeProvider theme={muiTheme}>
      <ThemeProvider theme={muiTheme}>
        <GlobalStyle />
        <Component {...pageProps} />
      </ThemeProvider>
    </SCThemeProvider>
  );
};

MyApp.propTypes = {
  Component: func.isRequired,
  pageProps: object.isRequired,
};

export default appWithTranslation(MyApp);

And my index.js

import React from 'react';
import { func } from 'prop-types';

import { withTranslation } from '../i18n';

const HomePage = ({ t }) => (
  <div>{t('banner title')}</div>
);

HomePage.getInitialProps = async () => ({
  namespacesRequired: ['common', 'home'],
});

HomePage.propTypes = {
  t: func.isRequired,
};

export default withTranslation('home')(HomePage);

Occurs in next-i18next version

"i18next": "^19.3.2",
"next": "^9.3.0",
"next-i18next": "^4.2.0",

Steps to reproduce

It’s happened after run the server

Expected behaviour

To not show any warning about namespacesRequired, it’s warning about performance negative impacts.

Screenshots

If applicable, add screenshots or a GIF to help explain your problem.

OS (please complete the following information)

• Device: MB air 2017 13
• Browser: Chrome 80.0.3987.106

Additional context

The i18n is working fine, it’s translating using the routes, that’s ok. The only trouble is this warning and the impact about performance I can have with this.

I’m not used to create issues like this, but I don’t know more where I can find a help. I’ve already read the document explaining about it and I believe that I’m doing everything ok.

[isaachinman]

Read the docs carefully.

Your app component must either extend App if it’s a class component or define a getInitialProps if it’s a function component (explanation here).

[TrongTrinh]

I have fixed it in nextjs template 1: config getInitialProps in file _app.tsx import { FC } from ‘react’; import { appWithTranslation } from ‘i18n’;

import NextApp, { AppProps, AppContext } from ‘next/app’;

const App: FC<AppProps> = ({ Component, pageProps }) => { return <Component {…pageProps} />; };

App.getInitialProps = async (appContext: AppContext): any => ({ …(await NextApp.getInitialProps(appContext)), });

export default appWithTranslation(App);

2: in file parent, i have config import React from ‘react’; import CampaignsV from ‘@lib/view/pages/campaigns’; import { withTranslation } from ‘i18n’;

import { WithTranslation } from ‘next-i18next’;

const CampaignsVM: NextPage<WithTranslation> = ({ t }) => { return <CampaignsV test={t(‘test trans text’)} />; };

CampaignsVM.getInitialProps = async (): any => ({ namespacesRequired: [‘common’, ‘table’, ‘campaign’], }); export default withTranslation(‘common’)(CampaignsVM);

3: in file children, i used import React from ‘react’; import { withTranslation } from ‘i18n’; import { WithTranslation } from ‘next-i18next’; import { NextPage } from ‘next’; const CampaignsV: NextPage<Props & WithTranslation, Promise<Props>> = ({ t, test }) => { return (

{test}

); }; CampaignsV.getInitialProps = async (): any => ({ namespacesRequired: [‘table’, ‘campaign’, ‘common’], });

export default withTranslation([‘table’, ‘campaign’])(CampaignsV);

and file i18n i have configured like this

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

const config = { defaultLanguage: ‘en’, otherLanguages: [‘th’], localeSubpaths: { th: ‘th’, en: ‘en’, }, }; const NextI18NextInstance = new NextI18Next(config);

module.exports = NextI18NextInstance;