I18nProviderClient wraps children in hidden div

[NurlanCS]

Describe the bug When i add I18nProviderClient it wraps whole content in div with hidden attribute

To Reproduce

<I18nProviderClient locale={lang} >
            <div>Hello</div>
 </I18nProviderClient>

Expected behavior <div>Hello</div>

Current resulted html

<div hidden>
    <div>Hello</div>
</div>

About (please complete the following information):

• next-international version 1.1.3
• Next.js version 14.0.3

Additional context if I enable javascript it removes extra div, but with disabled javascript page is blank

[QuiiBz]

I'm not seeing this issue in the CodeSandbox example, could you share a minimal reproduction?

[QuiiBz]

if I enable javascript it removes extra div, but with disabled javascript page is blank

I18nProviderClient needs JavaScript to be enabled to work.

[gustaveWPM]

I18nProviderClient needs JavaScript to be enabled to work.

Next.js needs JavaScript to be enabled to work. *

I don't understand this issue. Maybe Next.js is not a good choice if the website should run on environments with disabled JS?

[clopos-kamran]

I'm not seeing this issue in the CodeSandbox example, could you share a minimal reproduction?

Here is simple reproduction https://codesandbox.io/p/devbox/keen-architecture-fxswss?file=%2Fapp%2F%5Blocale%5D%2Fpage.tsx%3A9%2C24

[clopos-kamran]

I18nProviderClient needs JavaScript to be enabled to work.

Next.js needs JavaScript to be enabled to work. *

I don't understand this issue. Maybe Next.js is not a good choice if the website should run on environments with disabled JS?

NextJS is for Server Side Rendering which means it must work even with disabled JS. And it actually works. There's just a little issue with I18nProviderClient adding extra div

[QuiiBz]

Sorry for the delay, I started a new job. I cannot edit the reproduction, but the div comes from the page itself:

[zhaoruibing]

I encountered the same issue. My setup is next-international with NextJs app router, static export (pure client side). next: 14.1.0 next-international: 1.2.4

The use case for "disabled JS" is pre-render for SEO, where crawlers parse the page without JS (not all crawlers support JS).

(I am new to Typescript/React/NextJs, I could be wrong.) The issue is caused by create-i18n-provider-client.tsx, where it calls <Suspense> in I18nProviderWrapper(). The <Suspense> is pre-rendered into <div hidden>. This change is introduced in release 1.1.0, so I tried the release before it (release 1.0.1). "Disabled JS" works on 1.0.1, but it displays the translation keys, which is not useful.

Just to be clear, I have no expectation on this use case being supported. Though it is a nice to have feature.