Next-i18next: v8. beta 6 message on the server "It seems you are using the old wait option..."

[dohomi]

Describe the bug

I kickstarted a trial on the v8 beta and see following server message:

react-i18next:: It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.

Occurs in next-i18next version

v8.beta6

Steps to reproduce

Following the simple example

Expected behaviour

Probably some more option to hide/disable the message or show an example with Suspense (even though I am not sure in NextJS environment about this)

[axmachina]

I can confirm I'm seeing this in 7.0.1

[isaachinman]

Thanks @dohomi – this is fixed by #973.

Also, you can always pass your own config.react object if you want to override values.

[axmachina]

For others stumbling into here, ensure react.wait is literally undefined or it would fail.

This will result in warning/break:
react: { wait: false, useSuspense: true }

While this will not,
react: { useSuspense: true }

[isaachinman]

Hey @axmachina, v8.0.0 has been released now, and this is fixed.

[axmachina]

Note when using appWithTranslation with React Suspense as follows:

import { appWithTranslation } from 'next-i18next';
import React, { Component, Suspense } from "react";

const MyApp = ({ Component, pageProps }) => <Suspense fallback={"loading..."}><Component {...pageProps} /></Suspense>;

export default appWithTranslation(MyApp);

appWithTranslation can/will still fail as it sits outside Suspense.

To fix, consider moving appWithTranslation within Suspense like so

import { appWithTranslation } from 'next-i18next';
import React, { Component, Suspense } from "react";

const MyApp = ({ Component, pageProps }) => {

const TranslatedComponent = appWithTranslation(Component);

return <Suspense fallback={"loading..."}><TranslatedComponent {...pageProps} /></Suspense>;

};

export default MyApp;

As well, if you wish to avoid SSR rendering, use react/next dynamic:

export default dynamic(() => Promise.resolve(MyApp), {
  ssr: false,
});