"ReactDOMServer does not yet support Suspense." - message on projects start on nextjs
Ceditvodu opened this issue ยท 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
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.
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
also it seems like it could be reproduced only on server start, on page refresh it won't appear
@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...
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.
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?
Could be a duplicate of #1202.
@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
.
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)
@jamuhl @adrai What is the expected value for react.useSuspense
these days? Should we change the default value to false
?
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 We recommend users declare namespaces per-page. Is there any drawback to useSuspense: false
? Is it not enough to await the init promise?
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...
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.
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')}