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

Ceditvodu · 2021-06-13T18:59:56Z

🐛 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

The text was updated successfully, but these errors were encountered:

isaachinman · 2021-06-13T19:18:23Z

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.

Ceditvodu · 2021-06-13T19:54:19Z

@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 · 2021-06-13T19:58:20Z

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

Ceditvodu · 2021-06-14T18:11:35Z

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

siddhantk232 · 2021-06-15T08:45:12Z

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.

virgilbugnariu · 2021-06-15T14:35:53Z

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?

isaachinman · 2021-06-15T14:40:06Z

Could be a duplicate of #1202.

RA80533 · 2021-06-18T10:47:23Z

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

BennettDixon · 2021-06-18T17:02:41Z

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)

isaachinman · 2021-06-20T08:21:50Z

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

adrai · 2021-06-20T08:43:16Z

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

isaachinman · 2021-06-20T09:07:00Z

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

adrai · 2021-06-20T09:09:54Z

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

huarmenta · 2021-08-19T17:41:41Z

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.

stevenfukase · 2021-12-08T06:14:01Z

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')}

jashwant mentioned this issue Jul 22, 2021

Different namespace for each page #1329

Closed

isaachinman mentioned this issue Nov 16, 2021

refactor: Set config.react.useSuspense to false #1530

Merged

isaachinman closed this as completed in #1530 Nov 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Ceditvodu commented Jun 13, 2021 •

edited

Loading

isaachinman commented Jun 13, 2021

Ceditvodu commented Jun 13, 2021 •

edited

Loading

Ceditvodu commented Jun 13, 2021

Ceditvodu commented Jun 14, 2021

siddhantk232 commented Jun 15, 2021

virgilbugnariu commented Jun 15, 2021

isaachinman commented Jun 15, 2021

RA80533 commented Jun 18, 2021

BennettDixon commented Jun 18, 2021

isaachinman commented Jun 20, 2021

adrai commented Jun 20, 2021 •

edited

Loading

isaachinman commented Jun 20, 2021

adrai commented Jun 20, 2021 •

edited

Loading

huarmenta commented Aug 19, 2021

stevenfukase commented Dec 8, 2021 •

edited

Loading

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

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

Comments

Ceditvodu commented Jun 13, 2021 • edited Loading

🐛 Bug Report

Screen of error:

To Reproduce

translation file content (header.json)

next-i18next.config.js

next.config.js

_app.tsx

page.tsx

TargetComponent.tsx

Expected behavior

Environment

isaachinman commented Jun 13, 2021

Ceditvodu commented Jun 13, 2021 • edited Loading

Ceditvodu commented Jun 13, 2021

Ceditvodu commented Jun 14, 2021

siddhantk232 commented Jun 15, 2021

virgilbugnariu commented Jun 15, 2021

isaachinman commented Jun 15, 2021

RA80533 commented Jun 18, 2021

BennettDixon commented Jun 18, 2021

isaachinman commented Jun 20, 2021

adrai commented Jun 20, 2021 • edited Loading

isaachinman commented Jun 20, 2021

adrai commented Jun 20, 2021 • edited Loading

huarmenta commented Aug 19, 2021

stevenfukase commented Dec 8, 2021 • edited Loading

Ceditvodu commented Jun 13, 2021 •

edited

Loading

Ceditvodu commented Jun 13, 2021 •

edited

Loading

adrai commented Jun 20, 2021 •

edited

Loading

adrai commented Jun 20, 2021 •

edited

Loading

stevenfukase commented Dec 8, 2021 •

edited

Loading