Language Change Issue Causing Rendering Errors

[gmixoulis]

I am encountering an issue within a substantial project, which I am unable to reproduce in a CodeSandbox environment. Nevertheless, I have diligently followed the provided tutorial and can confirm full compatibility with the package.json configuration. Regrettably, due to the project's complexity, I am unable to share the entire codebase at this time.

The issue at hand pertains to a language switch from the default English to a secondary language. Upon refreshing the page, inconsistencies emerge with respect to the translation of certain forms. Additionally, I am encountering three distinct errors, which collectively disrupt the functionality of the application:

Unhandled Runtime Error:

Error: Text content does not match server-rendered HTML.
Error: Unknown root exit status.

Error: There was an error while hydrating. Since this error occurs outside of a Suspense boundary, the entire root transitions to client rendering.

I am curious if any other users have faced a similar challenge and would greatly appreciate any insights or guidance on resolving this issue.

Thank you for your attention and assistance.

EDIT1: Suspense worked and fixed the issue, the thing is that the supervisor of my supervisor do not want to use Suspense for some reason. Any alternative?

[bim-oulabi]

I also had the same issue, if you were able to solve it please share

[gmixoulis]

Even now, I have not found any solution without forcing a window.location.reload().
this is how i change the language on my website

   if (code === "GB") languageCode = "EN"
    if (code === "GR") languageCode = "EL"

    setSelected(languageCode)
    const url = pathname.replace(`/${lng}`, `/${languageCode.toLowerCase()}`)
    localStorage.setItem("i18nextLng", languageCode.toLowerCase())
    router.prefetch(url)

    router.replace(url)

It does redirect and change the language, but the issue is that it does not set the html tag for the class as dark (if I am in dark mode), and also that the website's plugins disappear even though they are initialized. After refreshing the page, everything works normal and the translation is working normally.