J'essaie de connecter une application NextJS / React fonctionnelle qui utilise 'with-redux-saga' et 'with-redux' à 'next-i1iN' ( https://github.com/isaachinman/next-i18next ) - mais lorsque mon application démarre, j'obtiens l'erreur suivante:
Erreur: si vous avez une méthode getInitialProps dans votre _app.js personnalisé fichier, vous devez renvoyer explicitement pageProps. Pour plus d'informations, voir: https://github.com/zeit/next.js#custom-app
TypeError: Impossible de lire la propriété 'namespacesRequired' sur undefined à Function.getInitialProps (/Users/cerulean/Documents/Projects/PAW-React/node_modules/next-i18next/dist/hocs/app-with-translation.js:94:57) à process._tickCallback (interne / process / next_tick.js: 68: 7)
Mais je renvoie les accessoires de page dans mon _app.js.
// index.js
const mapStateToProps = (state) => ({ homeData: getHomePageData(state) });
export default connect(mapStateToProps)(withNamespaces('common')(Index));
Il y a peut-être quelque chose qui ne va pas dans ma façon de faire reliant les différents HOC? Dans _app.js j'ai:
export default withRedux(createStore, { debug: false })(withReduxSaga({ async: true })(i18nInstance.appWithTranslation(MyApp)));
Et dans mon index.js j'ai:
XXX
Toutes les informations sont très appréciées!
3 Réponses :
Deux choses pour ceux qui rencontrent une situation similaire.
1) Quand ils disent 'return pageProps', cela signifie 'return pageProps', pas '... pageProps'
2) J'utilisais des instructions d'importation ES6 dans le fichier qui a configuré le singleton 'next-i18next'. Nécessaire pour utiliser "require" et "module.exports"
Maintenant ça marche ...
Pour quiconque aborde ce problème et se demande ce que signifie @cerulean dans sa réponse .
import NextJS ne transpile pas vos modules si vous utilisez un serveur personnalisé ( plus d'infos ). Par conséquent, vous ne pouvez pas utiliser import dans votre configuration next-i18next sans passer par une vallée de larmes.
static async getInitialProps({ Component, ctx }) {
let pageProps = {}
const extraStuff = doSomeExtraStuff()
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps, extraStuff }
}
// server.js
const nextI18next = require("./path/to/NextI18NextConfig");
// ... the rest of your server.js code
Si vous avez configuré correctement les sagas redux, cette méthode fonctionne pour moi:
export default withRedux(configureStore)(withReduxSaga(appWithTranslation(MyApp)));