The PAGE CRASHES when you add I18nProviderClient and write in input control

[JuanPabloLira]

Describe the bug When you interact with an input in a client component wrapped by an I18nProviderClient before the dictionary has finished loading, the page crashes

To Reproduce Steps to reproduce the behavior: Use the project in codesandbox that provides the documentation, add an input control in the client component

https://codesandbox.io/p/sandbox/jovial-paper-skkprk?file=%2Fapp%2F%5Blocale%5D%2Fpage.tsx%3A1%2C1

1.- add <input autoFocus /> to the client component 2.- Reload the page and write immediately

Expected behavior the page should not crash.

Screenshots

About (please complete the following information):

• next-international version 1.1.3
• Next.js version 14 and 13.5

Additional context If you wait for the dictionary to finish loading completely, everything works perfectly.

[QuiiBz]

🤯 I have no idea where this is coming from. Might not even be related to next-international, but Next.js / React itself?

[JuanPabloLira]

I think that if it has to do with next-international, if you do not wrap the components with the I18nProviderClient the page will not crash 😢

[Yovach]

Even it's not great, you can use :

    {
      en: async () => {
        await new Promise(resolve => setTimeout(resolve, 100));
        return import('./en');
      },
      fr: async () => {
        await new Promise(resolve => setTimeout(resolve, 100));
        return import('./fr');
      },
    },

in locales/client.ts

[JuanPabloLira]

Even it's not great, you can use :

    {
      en: async () => {
        await new Promise(resolve => setTimeout(resolve, 100));
        return import('./en');
      },
      fr: async () => {
        await new Promise(resolve => setTimeout(resolve, 100));
        return import('./fr');
      },
    },

in locales/client.ts

This change works to not block the page, but the javascript that loads later is blocked

[Yovach]

The use hook seems to crash the browser (cf. https://github.com/QuiiBz/next-international/blob/main/packages/next-international/src/app/client/create-i18n-provider-client.tsx#L35) if we interact with the page before the locale is loaded

I tried to remove it and use it in a useMemo hook to call but I've an error despite this (from the React doc, https://react.dev/reference/react/use#caveats)

The use Hook must be called inside a Component or a Hook.

[QuiiBz]

Thanks for the investigation @Yovach, I'll take a look this weekend. But this is honestly a very strange behavior...

[Yovach]

If you want to reproduce it easily:

• add a <input autoFocus/> in a Client Component that calls useI18n
• hold a key like A on your keyboard
• click on the refresh button

Then, your CPU should get 100% of usage (wtf?)

Can we preload locales in the createI18nProviderClient function?

[QuiiBz]

Sorry for the delay - https://github.com/QuiiBz/next-international/releases/tag/1.2.0 has been published!