Next-i18next: TypeError: Cannot read property 'namespacesRequired' of undefined

[vimutti77]

I got this error after update the package to version 0.20.0

TypeError: Cannot read property 'namespacesRequired' of undefined
    at Function._callee$ (xxx\node_modules\next-i18next\dist\hocs\app-with-translation.js:169:69)
    at tryCatch (xxx\node_modules\regenerator-runtime\runtime.js:62:40)
    at Generator.invoke [as _invoke] (xxx\node_modules\regenerator-runtime\runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (xxx\node_modules\regenerator-runtime\runtime.js:114:21)
    at asyncGeneratorStep (xxx\node_modules\@babel\runtime\helpers\asyncToGenerator.js:3:24)
    at _next (xxx\node_modules\@babel\runtime\helpers\asyncToGenerator.js:25:9)

After investigated. I found that the error occur when I add getInitialProps in _app.jsx like below.

class MyApp extends App {
  static async getInitialProps({ ctx }) {
    return {}
  }

  render () {
    const { Component, pageProps } = this.props
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

export default appWithTranslation(MyApp)

[capellini]

I think you should remove your getInitialProps method.

[vimutti77]

Actually, I have the code that need to run in getInitialProps method of every page. But I don't want to write the same code on every page. So I need to write it on _app.js.

[capellini]

I see.

The problem lies in the fact that your getInitialProps method returns an empty object and it cuts off any other getInitialProps calls. At the very least, you will need a method that looks similar to what is in the Next docs:

  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

Note the if statement above and the passing of the pageProps prop, which is subsequently used in this line of the render method:

    const { Component, pageProps } = this.props

There must be something similar in your _app.js file as well. If you need to add more props, then this can be done, but you must call Component.getInitialProps if it exists.

For example, here we're pulling in extraStuff:

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    const extraStuff = doSomeExtraStuff()
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps, extraStuff }
  }

  render () {
    const { Component, pageProps, extraStuff } = this.props

    // do something with extraStuff

    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }

But you cannot just return an empty object in getInitialProps.

[vimutti77]

I got it! Thank you for your explanation.

[isaachinman]

This is exactly as the official NextJs docs show as well.

[joeonmars]

Caveat is that you have to name pageProps as is in the next.js doc, changing the prop name would results in undefined error from app-with-translation.js.

[isaachinman]

@joeonmars That's correct, but that's just a NextJs thing. Would you like us to throw a more descriptive error?

[joeonmars]

@isaachinman throwing an error would be nice for this case with a link to the code example/next.js doc.

[isaachinman]

@joeonmars Fixed with 8e195bb.

[tkow]

I don't know if my problem is same at this. But I faced the same error in server side when production build though it don't reproduce in development server.
My version of this library is 0.31.0

[tkow]

I found my problem is possible to pass pageProps is undefined in my production mode _app.js codes.I solved this use

const pageProps = context.Component.getInitialProps ? await context.Component.getInitialProps(context.ctx) : {}

instead of

const pageProps = context.Component.getInitialProps && await context.Component.getInitialProps(context.ctx)

I don't know why previous code works in development , but you may care about this if you are in same situation. As a result, mine is same at this issue.

[fhourdin]

Got a similar issue, I'm using other HOC like "withRedux" and "withRedux" saga, My problem was fixed by moving "appWithTranslation" to the first level :

export default withRedux(makeStore)(withReduxSaga(appWithTranslation(MyApp)))