javascript - Tilslutning af NextJS, next-i18next, with-redux, with-redux-saga: "Fejl: Hvis du har en getInitialProps-metode i din brugerdefinerede _app.js-fil..."

Jeg prøver at forbinde en fungerende NextJS/React-app, der bruger 'with-redux-saga' og 'with-redux', til 'next-i18next' (https://github.com/isaachinman/next-i18next) -- men når min app starter, får jeg følgende fejl:

Fejl: Hvis du har en getInitialProps-metode i din tilpassede _app.js-fil, skal du eksplicit returnere pageProps. For mere information, se: https://github.com/zeit/next.js#custom-app

TypeError: Kan ikke læse ejendommen 'namespacesRequired' af undefined ved Function.getInitialProps (/Users/cerulean/Documents/Projects/PAW-React/node_modules/next-i18next/dist/hocs/app-with-translation.js:94:57) ved process._tickCallback (internal/process/next_tick.js:68:7)

Men jeg returnerer side-egenskaber i min _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 };
  }

Måske er der noget galt med, hvordan jeg kobler de forskellige HOCs sammen? I _app.js har jeg:

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

Og i min index.js har jeg:

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

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

Enhver indsigt værdsættes meget!

Svar #1

For alle, der kommer til dette emne og undrer sig over, hvad @cerulean mente i sit svar.

1) brug require i stedet for import

NextJS transpilerer ikke dine moduler, hvis du bruger en brugerdefineret server (mere info). Derfor kan du ikke bruge import i din next-i18next-konfiguration uden at gå igennem en dal af tårer.

// 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

Dette er en mix & match fra next-i18next eksempel og dokumentation

2) behold pageProps som det er

Du kan ikke lege for meget med getInitialProps returværdi. Hvis du har brug for at tilføje ekstra ting, skal du være forsigtig med ikke at erstatte eller manipulere pageProps. Se nedenfor.

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

    const extraStuff = doSomeExtraStuff()

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

    return { pageProps, extraStuff }
  }

Mere om det på denne tråd.

Svar #2

Hvis du har konfigureret redux sagas korrekt, virker denne måde for mig:

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