Closed
Description
🐛 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
Metadata
Metadata
Assignees
Labels
No labels