next-i18next: "ReactDOMServer does not yet support Suspense." - message on projects start on nextjs

🐛 Bug Report

On start nextjs shows error with next text: “ReactDOMServer does not yet support Suspense.” And after a two seconds it is renders the page with correct translation.

Screen of error:

To Reproduce

Test translation files serves with http-server

There is a code example on code sandbox: example

the structure on a server is next:

\ ru | - header.json
\ ua | - header.json
\ pl | - header.json

translation file content (header.json)

{
  "warenyky": "вареники"
}

next-i18next.config.js

const I18nextChainedBackend = require('i18next-chained-backend/dist/cjs/i18nextChainedBackend');
const I18NextHttpBackend = require('i18next-http-backend/cjs');

module.exports = {
  debug: true,
  i18n: {
    defaultLocale: 'ru',
    locales: ['ru', 'ua', 'pl'],
  },
  serializeConfig: false,
  use: [I18nextChainedBackend],
  backend: {
    backends: [
      I18NextHttpBackend,
    ],
    backendOptions: [
      {
        loadPath: 'https://9b67ef78f276.ngrok.io/{{lng}}/{{ns}}.json',
        crossDomain: true,
        requestOptions: {
          mode: 'no-cors',
          cache: 'default',
        },
      },
    ],
  },
};

next.config.js

const { i18n } = require('./next-i18next.config')

module.exports = {
  i18n,
};

_app.tsx

import type { AppProps, AppContext } from 'next/app';
import { appWithTranslation } from 'next-i18next'
import { reduxWrapper } from 'store';
import Head from 'next/head';
import nextI18NextConfig from '../next-i18next.config';

function MyApp({ Component, pageProps }: AppProps | any) {
  return (
    <>
      <Head>
        <title>some title</title>
      </Head>
        <Component {...pageProps} />
    </>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }: AppContext) => {
  const pageProps = Component.getInitialProps
    ? await Component.getInitialProps(ctx)
    : {};
  return { pageProps: pageProps };
};

export default reduxWrapper.withRedux(appWithTranslation(MyApp, nextI18NextConfig));

page.tsx

import Head from 'next/head';
import React from 'react';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { GetServerSideProps } from 'next';
import nextI18NextConfig from '../next-i18next.config.js';
import TargetComponent from '@components/TargetComponent';

const Page = (props) => {
  return (
    <>
      <Head>
        <title>page</title>
      </Head>
      <TargetComponent>content</TargetComponent>
    </>
  );
};

export const getServerSideProps: GetServerSideProps = async ({
  locale,
}: any) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['header'], nextI18NextConfig)),
    },
  };
};

export default Page;

TargetComponent.tsx

import { useTranslation } from 'next-i18next';
import React from 'react';

export const TargetComponent = function (props) {
  const [t, i18n, ready] = useTranslation('example', { 
    useSuspense: false 
  });
  console.log('ready', ready, i18n,  i18n.getResourceBundle(i18n.language, 'header'));
  return (
    <div>
      {ready ? t('warenyky'): 'loading'}
    </div>
  );
};

Expected behavior

The possibility to use backend stored translations with next-i18next, i18next-http-backend and i18next-chained-backend without “Suspense” error.

Environment

runtime version: node v14, safari
next-i18next version: 8.4.0
i18next-http-backend version: 1.2.6
i18next-chained-backend version: 3.0.2
next version: 10.2.3
os: Mac

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 12
Comments: 15 (6 by maintainers)

Most upvoted comments

I encountered this issue today as well. I was able to solve it by adding the following build settings to my next-i18next.config.js file:

react: {
    useSuspense: false
}

I found the solution in the NextJS Github repository issues section here: https://github.com/vercel/next.js/issues/22508#issuecomment-791205161

BennettDixon on Jun 18, 2021

PROBLEM: In my case the issue was that i didn’t have any locale.json referring to the locale I was loading in serverSideTranslations. SOLUTION: I just added a new locale file with the name I was trying to load and everything worked fine.

I know it’s kind of dumb but maybe someone may find this helpful.

huarmenta on Aug 19, 2021

I am getting the same error but it does not go away on page reload in my case. I have followed all the steps from the docs. This error comes up when I call serverSideTranslations from my nextjs pages. I tried to log the result of this function and it works as expected. Perhaps the appWithTranslation is causing issues. I tried both webpack 4 and 5.

siddhantk232 on Jun 15, 2021

If the namespaces (and languages) are not preloaded (defined) on init(), they will be lazy loaded, this will trigger a suspense or if not using Suspense, the user needs to check the ready flag, else the translations will not be ready to be rendered… You can try it by running this example: https://github.com/locize/next-i18next-locize (as soon as you remove the ns property in the config, (and set the useSuspense to false)) the translations will not be ready…

adrai on Jun 20, 2021

When translations are loaded asynchronously (i.e. when using i18next-http-backend or any other async backend) react-i18next (since v10) by default assumes you can use Suspense. If Suspense can’t be used, you need to set useSuspense to false. Generally when not using Suspense, you should wait for the ready flag to be true: https://react.i18next.com/latest/usetranslation-hook#not-using-suspense or https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense

Since it seemed Suspense was not supported in SSR apps, this was the advice we’ve written in the react-i18next documentation: https://react.i18next.com/latest/ssr#passing-initial-translations-initial-language-down-to-client

btw: to avoid a Suspense trigger, all translations can also be “preloaded” on init. That’s why here we’ve listed all namespaces: https://github.com/locize/next-i18next-locize/blob/main/next-i18next.config.js#L17

adrai on Jun 20, 2021

@isaachinman

In console I see same error as described

and another weird message:

i18next: init: i18next is already initialized. You should call init just once!

The code itself not complicate you can check it on a sandbox example

Ceditvodu on Jun 13, 2021