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

Question

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

Ceditvodu opened this issue 3 years ago · 15 comments

🐛 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

Answer 1 · 2021-06-13T19:18:23.000Z

Have you debugged the issue? What is using suspense, thus causing the error? Most likely this is simply user error, and you just need to modify values in your i18next config.

Answer 2 · 2021-06-13T19:54:19.000Z

@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

Answer 3 · 2021-06-13T19:58:20.000Z

also it seems like it could be reproduced only on server start, on page refresh it won't appear

Answer 4 · 2021-06-14T18:11:35.000Z

@isaachinman maybe you know which value I can try to modify in config? Because I've try a lot of them before and nothing help...

Answer 5 · 2021-06-15T08:45:12.000Z

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.

Answer 6 · 2021-06-15T14:35:53.000Z

I've been experiencing this as well. Updated to the latest versions and it's still reproducing. Just to make sure, are there any known issues with next 10.2.x?

Answer 7 · 2021-06-15T14:40:06.000Z

Could be a duplicate of #1202.

Answer 8 · 2021-06-18T10:47:23.000Z

@isaachinman Not related to the issue. The OP of this thread is experiencing this problem with both Webpack 4 and Webpack 5.

The issue you linked is related to Webpack 5 not transpiling a file incorrectly loaded via import.

Answer 9 · 2021-06-18T17:02:41.000Z

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: vercel/next.js#22508 (comment)

Answer 10 · 2021-06-20T08:21:50.000Z

@jamuhl @adrai What is the expected value for react.useSuspense these days? Should we change the default value to false?

Answer 11 · 2021-06-20T08:43:16.000Z

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

Answer 12 · 2021-06-20T09:07:00.000Z

@adrai We recommend users declare namespaces per-page. Is there any drawback to useSuspense: false? Is it not enough to await the init promise?

Answer 13 · 2021-06-20T09:09:54.000Z

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

Answer 14 · 2021-08-19T17:41:41.000Z

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.

Answer 15 · 2021-12-08T06:14:01.000Z

Fixed it by using the correct namespace

I was doing:

const { t } = useTranslation('members');
{t('loading_session')}

Instead of:

const { t } = useTranslation('common');
{t('members.loading_session')}

Which is the same as:

const { t } = useTranslation();
{t('common:members.loading_session')}