Подключение NextJS, next-i18next, with-redux, with-redux-saga: «Ошибка: если у вас есть метод getInitialProps в вашем пользовательском файле _app.js ...» - PullRequest
Новая
       15

Подключение NextJS, next-i18next, with-redux, with-redux-saga: «Ошибка: если у вас есть метод getInitialProps в вашем пользовательском файле _app.js ...»

0 голосов
/ 07 февраля 2019

Я пытаюсь подключить работающее приложение NextJS / React, которое использует 'with-redux-saga' и 'with-redux', к 'next-i1iN' (https://github.com/isaachinman/next-i18next) - но при загрузке моего приложенияЯ получаю следующую ошибку:

Ошибка: если у вас есть метод getInitialProps в вашем пользовательском файле _app.js, вы должны явно вернуть pageProps. Для получения дополнительной информации см .: https://github.com/zeit/next.js#custom-app

TypeError: Невозможно прочитать свойство 'namespacesRequired' из неопределенного в Function.getInitialProps (/Users/cerulean/Documents/Projects/PAW-React/node_modules/next-i18next/dist/hocs/app-with-translation.js:94: 57) at process._tickCallback (internal / process / next_tick.js: 68: 7)

Но я возвращаю реквизиты страницы в моих _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 };
  }

Возможно, что-то не так с тем, как я соединяю различные HOC? В _app.js у меня есть: 

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

А в моем index.js у меня есть: 

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

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

Любойпонимание высоко ценится!

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

Для всех, кто придет к этой проблеме и задастся вопросом, что имел в виду @cerulean в его ответе .

1), используйте require вместо import

NextJSне переносить ваши модули, если вы используете пользовательский сервер ( больше информации ).Поэтому вы не можете использовать import в своей конфигурации next-i18next , не пройдя сквозь слезы. 

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

Это сочетание и совпадение с next-i18next пример и документация

2) сохранить pageProps как есть

Вы не можете играть слишком много с getInitialProps возвращаемое значение.Если вам нужно добавить дополнительные материалы, вы должны быть осторожны, не заменяя и не манипулируя pageProps.См. Ниже. 

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

    const extraStuff = doSomeExtraStuff()

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

    return { pageProps, extraStuff }
  }

Подробнее об этом на этой теме .

0 голосов
/ 07 февраля 2019

Две вещи для тех, кто сталкивается с подобной ситуацией.

1) Когда они говорят «return pageProps», это означает «return pageProps», а не «... pageProps»

2) В файле я использовал операторы импорта ES6, которые настраивали синглтон next-i18next.Нужно использовать 'require' и 'module.exports'

Теперь это работает ...

...