fix: execute function in I18nProviderWrapper instead of I18nProvider (#…

…316) Co-authored-by: Tom Lienard <tom.lienrd@gmail.com>
QuiiBz · Dec 24, 2023 · 1bac288 · 1bac288
1 parent 94c6d9c
commit 1bac288
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/packages/next-international/src/app/client/create-i18n-provider-client.tsx b/packages/next-international/src/app/client/create-i18n-provider-client.tsx
@@ -1,5 +1,5 @@
-import { notFound } from 'next/navigation';
 import type { BaseLocale, ImportedLocales } from 'international-types';
+import { notFound } from 'next/navigation';
 import type { Context, ReactNode } from 'react';
 import React, { Suspense, use, useMemo } from 'react';
 import { flattenLocale } from '../../common/flatten-locale';
@@ -11,6 +11,7 @@ type I18nProviderProps = Omit<I18nProviderWrapperProps, 'fallback'>;
 type I18nProviderWrapperProps = {
   locale: string;
   fallback?: ReactNode;
+  importLocale: Promise<Record<string, unknown>>;
   children: ReactNode;
 };
 
@@ -21,18 +22,10 @@ export function createI18nProviderClient<Locale extends BaseLocale>(
   locales: ImportedLocales,
   fallbackLocale?: Record<string, unknown>,
 ) {
-  function I18nProvider({ locale, children }: I18nProviderProps) {
-    let clientLocale: any = localesCache.get(locale);
-
-    if (!clientLocale) {
-      const newLocale = locales[locale as keyof typeof locales];
-
-      if (!newLocale) {
-        error(`The locale '${locale}' is not supported. Defined locales are: [${Object.keys(locales).join(', ')}].`);
-        notFound();
-      }
+  function I18nProvider({ locale, importLocale, children }: I18nProviderProps) {
+    const clientLocale = (localesCache.get(locale) ?? use(importLocale).default) as Record<string, unknown>;
 
-      clientLocale = use(newLocale()).default;
+    if (!localesCache.has(locale)) {
       localesCache.set(locale, clientLocale);
     }
 
@@ -49,9 +42,18 @@ export function createI18nProviderClient<Locale extends BaseLocale>(
   }
 
   return function I18nProviderWrapper({ locale, fallback, children }: I18nProviderWrapperProps) {
+    const importFnLocale = locales[locale as keyof typeof locales];
+
+    if (!importFnLocale) {
+      error(`The locale '${locale}' is not supported. Defined locales are: [${Object.keys(locales).join(', ')}].`);
+      notFound();
+    }
+
     return (
       <Suspense fallback={fallback}>
-        <I18nProvider locale={locale}>{children}</I18nProvider>
+        <I18nProvider locale={locale} importLocale={importFnLocale()}>
+          {children}
+        </I18nProvider>
       </Suspense>
     );
   };

diff --git a/packages/next-international/src/app/client/create-use-change-locale.ts b/packages/next-international/src/app/client/create-use-change-locale.ts
@@ -1,6 +1,7 @@
-import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import type { I18nChangeLocaleConfig, I18nClientConfig } from '../../types';
+import { warn } from '../../helpers/log';
 import type { ImportedLocales } from 'international-types';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import type { I18nChangeLocaleConfig, I18nClientConfig } from '../../types';
 import { localesCache } from './create-i18n-provider-client';
 
 export function createUseChangeLocale<LocalesKeys>(
@@ -30,7 +31,14 @@ export function createUseChangeLocale<LocalesKeys>(
     }
 
     return function changeLocale(newLocale: LocalesKeys) {
-      locales[newLocale as keyof typeof locales]().then(module => {
+      const importFnLocale = locales[newLocale as keyof typeof locales];
+
+      if (!importFnLocale) {
+        warn(`The locale '${newLocale}' is not supported. Defined locales are: [${Object.keys(locales).join(', ')}].`);
+        return;
+      }
+
+      importFnLocale().then(module => {
         localesCache.set(newLocale as string, module.default);
 
         push(`/${newLocale}${pathWithoutLocale}${finalSearchParams}`);