Next-i18next: Keep getting: "You have not declared a namespacesRequired array on your page-level component: undefined"

[bgold0]

You have not declared a namespacesRequired array on your page-level component: undefined. 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

I keep getting the following error but I feel like I have namespacesRequired on all my page level components.

Can someone help figure out where this is actually talking about so I can get to the bottom of it?

[isaachinman]

If you provide a reproducible example (repo), I can help debug. Thanks!

[bgold0]

@isaachinman I appreciate that. I changed line 177 of app-with-translatioon.js with console.warn(ctx.req.url, "You have not declared.. and I am receiving that is coming from this page:

/_next/static/webpack/1b2c737c79b40836f4fa.hot-update.json

My repo is quite big so it'll take me some time but maybe you have some insight into this.

[isaachinman]

We'd need to track down the component itself, not the URL. It looks like in your case the URL is just a hot update because you're in dev mode. Perhaps console log the entire component class and see what it is? It might be the NextJs error page.

[ghost]

@isaachinman I placed a console.log (I know, not a good idea 😅) inside node_modules/next-i18next/dist/hocs/app-translation.js Line 178

console.log(pageProps);
consoleMessage('warn', "You have not declared a namespacesRequired array on your page-level component: ".concat(Component.displayName, ". 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"));

I received the output { "statusCode": 404 }, which leads me to believe this error is being thrown by the _error.js page (which in my case has not been created yet).

Could this be the cause? If so, can you suggest a remedy?

[isaachinman]

Can you please provide a reproducible example (repo)?

[ghost]

In my case, I happened to return requiredNamespaces instead of namespacesReturned. Once I fixed it, it worked...

Thank you

[isaachinman]

Do you mean that sending requiredNamespaces instead of namespacesRequired caused you to see the console warning of You have not declared a namespacesRequired array... undefined? It sounds like the error you're describing is exactly the purpose of the warning in the first place.

[ghost]

@isaachinman Exactly. My point is that I spoke too soon 😅

[bgold0]

Yea I don't believe he's having the same issue as me. I will need some time getting something reproducible. I will attempt to console log the entire component and see what I get. I appreciate the fast response @isaachinman

[isaachinman]

No problem, just let me know.

[VBagmut]

In my case I solved problem by renaming js files in locales folder to json.

[laxplaer]

I solved this issue by providing favicon.ico, which was adding 404 error and causing this warning.

[isaachinman]

Yeah, I suspect displayName for the Next error page(s) is undefined, but need a good way to reproduce this. A normal 404 will probably do the trick - will take a look as soon as I have availability.

[isaachinman]

Should be fixed with 34e8e08. Released with v0.18.0.

[isaachinman]

Huh... it just occurred to me that while undefined is not helpful, this error _might actually be a good thing_ and we maybe shouldn't be excluding it as 34e8e08 does. Most likely people are going to want to manually declare their own _error.js page and specifically localise it.

I've opened an issue in the NextJs repo to track this:

https://github.com/zeit/next.js/issues/6026

Hopefully we can get that fixed on the NextJs and then revert 34e8e08.

[therealchewbecca]

I solved this issue by providing favicon.ico, which was adding 404 error and causing this warning.

@laxplaer Thanks for the fix!

[Alexander2317]

@isaachinman I have the same warning with [email protected].
If I create 404.js page and _error.js I see this warning.
If I remove 404.js I see a warning from next.js
Warning: You have added a custom /_error page without a custom /404 page. This prevents the 404 page from being auto statically optimized. See here for info: https://err.sh/next.js/custom-error-no-custom-404
How to fix it?)

[fabioriva]

@isaachinman Same as Alexander2317

[bronius]

I think by placing a favicon.ico (or resolving any 404) you are only sidestepping the issue; you're not actually resolving the underlying issue that your error handler is not namespacing like it should. Right?

[michaelmorgantalabat]

I tried to use getStaticProps with 404.tsx and still same issue as @Alexander2317

here is my 404.tsx file:

import { I18nPage } from 'lib/i18n';
import { GetStaticProps } from 'next';

const ErrorPage: I18nPage = () => <h1>404</h1>;

export const getStaticProps: GetStaticProps = async () => {
  return {
    props: {
      namespacesRequired: ['common'],
    },
  };
};

export default ErrorPage;

[Alexander2317]

My _error.jsx

// @flow

import * as React from 'react'
import Head from 'next/head'

import { withTranslation } from '../i18n'
import { Layout } from '../components'

import style from './_error.module.css'

type Props = {
  statusCode?: any,
  t: Function,
}

const Error = ({ statusCode, t }: Props): React.Node => {
  const message = statusCode
    ? t('error-with-status', { statusCode })
    : t('error-without-status')
  return (
    <>
      <Head>
        <title>{message}</title>
      </Head>
      <Layout>
        <p style={style.title}>{message}</p>
      </Layout>
    </>
  )
}

Error.getInitialProps = async ({ res, err }) => {
  let statusCode = null
  if (res) {
    ;({ statusCode } = res)
  } else if (err) {
    ;({ statusCode } = err)
  }
  return {
    statusCode,
    namespacesRequired: ['common', 'header', 'footer'],
  }
}

Error.defaultProps = {
  statusCode: null,
}

export default (withTranslation('common')(
  Error,
): React.AbstractComponent<Props>)

And 404.jsx

// @flow

import * as React from 'react'
import Head from 'next/head'

import { constants } from '../__data__'
import { withTranslation } from '../i18n'
import { Layout, Link } from '../components'

import style from './404.module.css'

type Props = {
  t: Function,
}

const Custom404 = ({ t }: Props): React.Node => (
  <>
    <Head>
      <title>{t('error-404-status')}</title>
    </Head>
    <Layout>
      <h1 className={style.title}>{t('error-404-status')}</h1>
      <Link route={constants.routes.base}>{t('error-404-link')}</Link>
    </Layout>
  </>
)

export default (withTranslation(['common', 'header', 'footer'])(
  Custom404,
): React.AbstractComponent<Props>)

I tried to use getInitialProps in 404.jsx, getStaticProps but it didn't solve the problem.

export const getStaticProps = () => ({
  props: {
    namespacesRequired: ['common', 'header', 'footer'],
  },
})