Ошибка: I18nextWithTranslation приостановлено во время рендеринга, но не указан резервный интерфейс

Question

Я пытаюсь заставить I18N работать с использованием response-i18next. Я следую приведенным здесь шагам как можно ближе. Я пытался в течение нескольких часов с большим количеством гуглить вокруг и еще не обнаружил, что я делаю неправильно. Любая помощь приветствуется.

Я получаю эту трассировку стека ошибок:

    Exception has occurred: Error
Error: I18nextWithTranslation suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
    in I18nextWithTranslation (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter
    in CookiesProvider
    at throwException (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:45969:13)
    at renderRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47147:11)
    at performWorkOnRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48000:7)
    at performWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47912:7)
    at performSyncWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47886:3)
    at requestWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47755:5)
    at scheduleWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47569:5)
    at scheduleRootUpdate (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48230:3)
    at updateContainerAtExpirationTime (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48258:10)
    at updateContainer (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48315:10)

У меня есть Suspense с отступлением на самом верхнем уровне:

import React, { Suspense } from 'react';
import ReactDOM from "react-dom";
import { CookiesProvider } from 'react-cookie';
import App from "./App.js";
import { BrowserRouter } from "react-router-dom";
// import i18n (needs to be bundled ;)) 
import './i18n';

ReactDOM.render(
  <CookiesProvider>
    <BrowserRouter basename="/cgadmin-react-primeng/">
      <Suspense fallback={<Loader />}>
        <App />
      </Suspense>
    </BrowserRouter>
  </CookiesProvider>, 
  document.getElementById("root")
);

const Loader = () => (
  <div>loading...</div>
);

Я не использую хуки, но HOC рекомендуется для использования с классами в классе App следующим образом:

export default withTranslation()(App);

Answer 1

По умолчанию для useSuspense установлено значение true, поэтому React требуется резервный пользовательский интерфейс. Установка для useSuspense значения false решит вашу проблему, поскольку React больше не будет нуждаться в резервном пользовательском интерфейсе.

i18n
    .init({
        react: {
            useSuspense: false
        }
    });

Answer 2

У меня была такая же проблема, и я решил обернуть свой рендер на <Suspense>, вы можете найти дополнительную информацию здесь https://reactjs.org/docs/react-api.html

И в i18next сказано то же самое в своей документации https://react.i18next.com/latest/using-with-hooks

-

также

i18n
    .init({
        react: {
            useSuspense: false
        }
    });

Предыдущий код работает, но оставил много предупреждений, лучший способ - использовать <Suspense>

Answer 3

Можете ли вы привести более конкретный пример ситуации с ошибками? Я стараюсь изо всех сил имитировать в песочнице ( https://codesandbox.io/s/10j2xw6j3), но я не могу воспроизвести случай.

PS Это должно быть добавлено в комментарии, но stackru мешает новым пользователям делать это. Поэтому я выкладываю сюда и редактирую позже

Answer 4

Не отключайте приостановку! Добавьте ресурсы в ваш init:

      i18n.init({
    resources: {},
});

Answer 5

Просто дикая догадка, может ли это быть, потому что вы определяете Loader после того, как вы используете это?

Answer 6

Если вы используете XHR (i18next-xhr-backend), вам нужно обернуть ваше приложение в компонент Suspense:

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  return <h1>{t('Welcome to React')}</h1>
}

// i18n translations might still be loaded by the xhr backend
// use react's Suspense
export default function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
    </Suspense>
  );
}