Pesquisa de site

javascript - Conectando NextJS, next-i18next, with-redux, with-redux-saga: "Erro: Se você tem um método getInitialProps no seu arquivo _app.js personalizado..."

Estou tentando conectar um aplicativo NextJS/React em funcionamento que usa 'with-redux-saga' e 'with-redux' ao 'next-i18n' (https://github.com/isaachinman/next-i18next) -- mas quando meu aplicativo inicia, recebo o seguinte erro:

Erro: Se você tiver um método getInitialProps no seu arquivo _app.js personalizado, você deve retornar explicitamente pageProps. Para mais informações, veja: https://github.com/zeit/next.js#custom-app

TypeError: Não é possível ler a propriedade 'namespacesRequired' de indefinido em Function.getInitialProps (/Users/cerulean/Documents/Projects/PAW-React/node_modules/next-i18next/dist/hocs/app-with-translation.js:94:57) em process._tickCallback (internal/process/next_tick.js:68:7)

Mas estou retornando propriedades da página no meu _app.js.

// _app.js
 static async getInitialProps({ Component, ctx }) {

    const pageProps = {};
    let temp;

    if (Component.getInitialProps) {
      temp = await Component.getInitialProps({ ctx });
    }
    Object.assign(pageProps, temp);
    return { ...pageProps };
  }

Talvez haja algo de errado com a forma como estou conectando os vários HOCs? No _app.js eu tenho:

export default withRedux(createStore, { debug: false })(withReduxSaga({ async: true })(i18nInstance.appWithTranslation(MyApp)));

E no meu index.js eu tenho:

   // index.js
const mapStateToProps = (state) => ({ homeData: getHomePageData(state) });

export default connect(mapStateToProps)(withNamespaces('common')(Index));

Qualquer insight será muito apreciado!

Resposta #1

Para qualquer pessoa que esteja entrando nesta questão e se perguntando o que @cerulean quis dizer em sua resposta.

1) use require em vez de import

NextJS não transpila seus módulos se você usar um servidor personalizado (mais informações). Portanto, você não pode usar import em sua configuração do next-i18next sem passar por um vale de lágrimas.

// NextI18NextConfig.js

const NextI18Next = require('next-i18next/dist/commonjs')

module.exports = new NextI18Next({
  defaultLanguage: "en",
  otherLanguages: ["de"]
  // ... other options
});

// server.js

const nextI18next = require("./path/to/NextI18NextConfig");

// ... the rest of your server.js code

Isto é uma mistura&combinação do exemplo e documentação do next-i18next

2) mantenha pageProps como está

Você não pode brincar muito com o valor retornado de getInitialProps. Se precisar adicionar coisas extras, deve ter cuidado para não substituir ou manipular pageProps. Veja abaixo.

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

    const extraStuff = doSomeExtraStuff()

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

    return { pageProps, extraStuff }
  }

Mais sobre isso neste tópico.

Resposta #2

Se você configurou o redux sagas corretamente, desta forma funciona para mim:

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