Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Ceditvodu opened this issue Jun 13, 2021 · 15 comments · Fixed by #1530
Closed

Comments

@Ceditvodu
Copy link

Ceditvodu commented Jun 13, 2021

🐛 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:

image

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
@isaachinman
Copy link
Contributor

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
Copy link
Author

Ceditvodu commented Jun 13, 2021

@isaachinman

In console I see same error as described

image

and another weird message:

image

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
Copy link
Author

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

@Ceditvodu
Copy link
Author

@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
Copy link

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
Copy link

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
Copy link
Contributor

Could be a duplicate of #1202.

@RA80533
Copy link

RA80533 commented Jun 18, 2021

@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
Copy link

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
Copy link
Contributor

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

@adrai
Copy link
Member

adrai commented 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
image
image

image
image

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
Copy link
Contributor

@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
Copy link
Member

adrai commented Jun 20, 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...

@huarmenta
Copy link

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
Copy link

stevenfukase commented Dec 8, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants