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

Created on 22 Nov 2019 · 3Comments · Source: isaachinman/next-i18next

Describe the bug

I'm having trouble to make add next-18n to the project. I do follow the steps but I guess the problem is within many other HOCs I already use in _app.js

Occurs in next-i18next version

2.1.0

Steps to reproduce

That's my configuration. I follow official examples from nextjs to build up the blocks I need in the app.
That's I guess the problematic file. When I remove appWithTranslation HOC from _app.js file the page works fine, but of course without i18n capabilities

// pages/_app.js

import App from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import withReduxSaga from 'next-redux-saga';
import { appWithTranslation } from '../i18n';

import createStore from '../lib/store';

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

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

    return { pageProps };
  }

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

export default appWithTranslation(withRedux(createStore)(withReduxSaga(MyApp)));

// i18n.js
const NextI18Next = require('next-i18next/dist/commonjs').default;

module.exports = new NextI18Next({
  otherLanguages: ['en', 'pl'],
  strictMode: false
});

// package.json
{
    "name": "p",
    "version": "1.0.0",
    "scripts": {
        "test": "jest",
        "dev": "node server.js",
        "build": "next build",
        "start": "cross-env NODE_ENV=production node server.js",
        "flow": "flow"
    },
    "dependencies": {
        "@apollo/react-hooks": "^3.1.3",
        "@apollo/react-ssr": "^3.1.3",
        "apollo-cache-inmemory": "^1.6.3",
        "apollo-client": "^2.6.4",
        "apollo-client-preset": "^1.0.8",
        "apollo-link-context": "^1.0.19",
        "apollo-link-http": "^1.5.16",
        "cookie": "^0.4.0",
        "es6-promise": "^4.1.1",
        "express": "^4.17.1",
        "graphql": "^14.1.1",
        "graphql-anywhere": "^4.0.2",
        "graphql-tag": "^2.5.0",
        "https-proxy-agent": "^3.0.1",
        "isomorphic-unfetch": "^3.0.0",
        "next": "latest",
        "next-i18next": "^2.1.0",
        "next-redux-saga": "^4.0.2",
        "next-redux-wrapper": "^4.0.1",
        "next-routes": "^1.4.2",
        "prop-types": "^15.6.0",
        "react": "^16.7.0",
        "react-apollo": "^3.1.3",
        "react-dom": "^16.7.0",
        "react-redux": "^6.0.1",
        "redux": "^4.0.1",
        "redux-devtools-extension": "^2.13.8",
        "redux-saga": "^1.1.3"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@apollo/react-testing": "^3.1.3",
        "@babel/core": "latest",
        "@testing-library/react": "^9.3.2",
        "babel-eslint": "latest",
        "babel-jest": "latest",
        "babel-plugin-transform-flow-strip-types": "latest",
        "cross-env": "^5.2.0",
        "enzyme": "latest",
        "enzyme-adapter-react-16": "latest",
        "eslint": "6.1.0",
        "eslint-config-airbnb": "18.0.1",
        "eslint-config-prettier": "^6.5.0",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.14.3",
        "eslint-plugin-react-hooks": "^1.7.0",
        "flow-bin": "latest",
        "jest": "latest",
        "prettier": "^1.18.2",
        "react-test-renderer": "latest"
    }
}

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

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const routes = require('./routes');

const handle = routes.getRequestHandler(app);
app.prepare().then(() => {
  const server = express();
  server.use(nextI18NextMiddleware(nextI18next));
  server.get('*', (req, res) => handle(req, res));
  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});