@bleedingdev/modern-js-plugin-i18n 3.2.0-ultramodern.3 → 3.2.0-ultramodern.30

package/dist/types/shared/type.d.ts

@@ -0,0 +1,168 @@
+import type { LanguageDetectorOptions, Resources } from '../runtime/i18n/instance';
+import type { LocalisedUrlsOption } from './localisedUrls';
+export interface BaseLocaleDetectionOptions {
+    localePathRedirect?: boolean;
+    i18nextDetector?: boolean;
+    languages?: string[];
+    fallbackLanguage?: string;
+    detection?: LanguageDetectorOptions;
+    ignoreRedirectRoutes?: string[] | ((pathname: string) => boolean);
+    /**
+     * Enables localised pathnames in addition to the locale prefix.
+     *
+     * - `false`: keep only locale-prefix behavior (`/en/about`).
+     * - object: map canonical route paths to every configured language.
+     *
+     * Defaults to `true` when `localePathRedirect` is enabled, so route
+     * generation validates that every localisable route path has entries for all
+     * configured languages.
+     */
+    localisedUrls?: LocalisedUrlsOption;
+}
+export interface LocaleDetectionOptions extends BaseLocaleDetectionOptions {
+    localeDetectionByEntry?: Record<string, BaseLocaleDetectionOptions>;
+}
+/**
+ * Options for loading i18n resources via SDK
+ */
+export interface I18nSdkLoadOptions {
+    /** Single language code to load (e.g., 'en', 'zh') */
+    lng?: string;
+    /** Single namespace to load (e.g., 'translation', 'common') */
+    ns?: string;
+    /** Multiple language codes to load */
+    lngs?: string[];
+    /** Multiple namespaces to load */
+    nss?: string[];
+    /** Load all available languages and namespaces */
+    all?: boolean;
+}
+/**
+ * SDK function to load i18n resources
+ * Supports multiple loading modes:
+ * 1. Single resource: sdk({ lng: 'en', ns: 'translation' })
+ * 2. Batch by languages: sdk({ lngs: ['en', 'zh'], ns: 'translation' })
+ * 3. Batch by namespaces: sdk({ lng: 'en', nss: ['translation', 'common'] })
+ * 4. Batch by both: sdk({ lngs: ['en', 'zh'], nss: ['translation', 'common'] })
+ * 5. Load all: sdk({ all: true }) or sdk()
+ *
+ * @param options - Loading options
+ * @returns Promise that resolves to resources object or the resources object directly
+ *          Resources format: { [lng]: { [ns]: { [key]: value } } }
+ */
+export type I18nSdkLoader = (options: I18nSdkLoadOptions) => Promise<Resources> | Resources;
+/**
+ * Chained backend configuration
+ * Used internally when both loadPath and sdk are provided
+ */
+export interface ChainedBackendConfig {
+    _useChainedBackend: boolean;
+    _chainedBackendConfig: {
+        backendOptions: Array<Record<string, unknown>>;
+    };
+    cacheHitMode?: 'none' | 'refresh' | 'refreshAndUpdateStore';
+}
+/**
+ * Extended backend options that may include chained backend configuration
+ */
+export type ExtendedBackendOptions = BaseBackendOptions & Partial<ChainedBackendConfig>;
+export interface BaseBackendOptions {
+    enabled?: boolean;
+    loadPath?: string;
+    addPath?: string;
+    /**
+     * Cache hit mode for chained backend (only effective when both `loadPath` and `sdk` are provided)
+     *
+     * - `'none'` (default): If the first backend returns resources, stop and don't try the next backend
+     * - `'refresh'`: Try to refresh the cache by loading from the next backend and update the cache
+     * - `'refreshAndUpdateStore'`: Try to refresh the cache by loading from the next backend,
+     *   update the cache and also update the i18next resource store. This allows FS/HTTP resources
+     *   to be displayed first, then SDK resources will update them asynchronously.
+     *
+     * @default 'refreshAndUpdateStore' when both loadPath and sdk are provided
+     */
+    cacheHitMode?: 'none' | 'refresh' | 'refreshAndUpdateStore';
+    /**
+     * SDK function to load i18n resources dynamically
+     *
+     * **Important**: In `modern.config.ts`, you can only set this to `true` or any identifier
+     * to enable SDK mode. The actual SDK function must be provided in `modern.runtime.ts`
+     * via `initOptions.backend.sdk`.
+     *
+     * When both `loadPath` (or FS backend) and `sdk` are provided, the plugin will automatically
+     * use `i18next-chained-backend` to chain multiple backends. The order will be:
+     * 1. HTTP/FS backend (primary) - loads from `loadPath` or file system first for quick initial display
+     * 2. SDK backend (fallback/update) - loads from the SDK function to update/refresh translations
+     *
+     * With `cacheHitMode: 'refreshAndUpdateStore'` (default), FS/HTTP resources will be displayed
+     * immediately, then SDK resources will be loaded asynchronously to update the translations.
+     *
+     * If only `sdk` is provided, it will be used instead of the default HTTP/FS backend
+     *
+     * @example In modern.config.ts - enable SDK mode
+     * ```ts
+     * backend: {
+     *   enabled: true,
+     *   sdk: true, // or any identifier, just to enable SDK mode
+     * }
+     * ```
+     *
+     * @example In modern.runtime.ts - provide the actual SDK function
+     * ```ts
+     * export default defineRuntimeConfig({
+     *   i18n: {
+     *     initOptions: {
+     *       backend: {
+     *         sdk: async (options) => {
+     *           // Your SDK implementation
+     *           if (options.all) {
+     *             return await mySdk.getAllResources();
+     *           }
+     *           if (options.lng && options.ns) {
+     *             return await mySdk.getResource(options.lng, options.ns);
+     *           }
+     *           // Handle other cases...
+     *         }
+     *       }
+     *     }
+     *   }
+     * });
+     * ```
+     *
+     * @example Single resource loading
+     * ```ts
+     * sdk: async (options) => {
+     *   if (options.lng && options.ns) {
+     *     const response = await fetch(`/api/i18n/${options.lng}/${options.ns}`);
+     *     return response.json();
+     *   }
+     * }
+     * ```
+     *
+     * @example Load all resources at once
+     * ```ts
+     * sdk: async (options) => {
+     *   if (options?.all) {
+     *     // Load all languages and namespaces
+     *     return await mySdk.getAllResources();
+     *   }
+     *   // Handle other cases...
+     * }
+     * ```
+     *
+     * @example Batch loading
+     * ```ts
+     * sdk: async (options) => {
+     *   if (options?.lngs && options?.nss) {
+     *     // Load multiple languages and namespaces
+     *     return await mySdk.getBatchResources(options.lngs, options.nss);
+     *   }
+     *   // Handle single or other cases...
+     * }
+     * ```
+     */
+    sdk?: I18nSdkLoader | boolean | string;
+}
+export interface BackendOptions extends BaseBackendOptions {
+    backendOptionsByEntry?: Record<string, BaseBackendOptions>;
+}

package/dist/types/shared/utils.d.ts

@@ -0,0 +1,5 @@
+import type { BaseBackendOptions, BaseLocaleDetectionOptions } from './type';
+export declare function getEntryConfig<T extends Record<string, any>>(entryName: string, config: T, entryKey: string): T | undefined;
+export declare function removeEntryConfigKey<T extends Record<string, any>>(config: T, entryKey: string): Omit<T, typeof entryKey>;
+export declare function getLocaleDetectionOptions(entryName: string, localeDetection: BaseLocaleDetectionOptions): BaseLocaleDetectionOptions;
+export declare function getBackendOptions(entryName: string, backend: BaseBackendOptions): BaseBackendOptions;

package/package.json

@@ -17,7 +17,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.2.0-ultramodern.3",
+  "version": "3.2.0-ultramodern.30",
   "engines": {
     "node": ">=20"
   },
@@ -84,18 +84,18 @@
     "@swc/helpers": "^0.5.21",
     "i18next-browser-languagedetector": "^8.2.1",
     "i18next-chained-backend": "^5.0.4",
-    "i18next-fs-backend": "^2.6.5",
+    "i18next-fs-backend": "^2.6.6",
     "i18next-http-backend": "^4.0.0",
-    "i18next-http-middleware": "^3.9.6",
-    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.3",
-    "@modern-js/server-core": "npm:@bleedingdev/modern-js-server-core@3.2.0-ultramodern.3",
-    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.3",
-    "@modern-js/server-runtime": "npm:@bleedingdev/modern-js-server-runtime@3.2.0-ultramodern.3",
-    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.3",
-    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.3"
+    "i18next-http-middleware": "^3.9.7",
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.30",
+    "@modern-js/server-core": "npm:@bleedingdev/modern-js-server-core@3.2.0-ultramodern.30",
+    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.30",
+    "@modern-js/server-runtime": "npm:@bleedingdev/modern-js-server-runtime@3.2.0-ultramodern.30",
+    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.30",
+    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.30"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "3.2.0-ultramodern.3",
+    "@modern-js/runtime": "3.2.0-ultramodern.30",
     "i18next": ">=25.7.4",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -112,16 +112,16 @@
   "devDependencies": {
     "@rslib/core": "0.21.5",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.8.0",
-    "@typescript/native-preview": "7.0.0-dev.20260516.1",
+    "@types/node": "^25.9.1",
+    "@typescript/native-preview": "7.0.0-dev.20260527.2",
     "i18next": "26.2.0",
     "jest": "^30.4.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-i18next": "17.0.8",
-    "ts-jest": "^29.4.9",
-    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.3",
-    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.3"
+    "ts-jest": "^29.4.11",
+    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.30",
+    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.30"
   },
   "sideEffects": false,
   "publishConfig": {

package/rstest.config.mts

@@ -0,0 +1,39 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { ProjectConfig } from '@rstest/core';
+import { withTestPreset } from '@scripts/rstest-config';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const commonConfig: ProjectConfig = {
+  setupFiles: [resolve(__dirname, '../../../scripts/rstest-config/setup.ts')],
+  globals: true,
+  tools: {
+    swc: {
+      jsc: {
+        transform: {
+          react: {
+            runtime: 'automatic',
+          },
+        },
+      },
+    },
+  },
+};
+
+export default {
+  projects: [
+    withTestPreset({
+      name: 'plugin-i18n-node',
+      testEnvironment: 'node',
+      include: ['tests/localisedUrls.test.ts'],
+      extends: commonConfig,
+    }),
+    withTestPreset({
+      name: 'plugin-i18n-client',
+      testEnvironment: 'happy-dom',
+      include: ['tests/routerAdapter.test.tsx'],
+      extends: commonConfig,
+    }),
+  ],
+};

package/src/cli/index.ts

@@ -1,8 +1,16 @@
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
 import { getPublicDirRoutePrefixes } from '@modern-js/server-core';
-import type { Entrypoint } from '@modern-js/types';
+import type {
+  Entrypoint,
+  NestedRouteForCli,
+  PageRoute,
+} from '@modern-js/types';
 import fs from 'fs';
 import path from 'path';
+import {
+  applyLocalisedUrlsToRoutes,
+  resolveLocalisedUrlsConfig,
+} from '../shared/localisedUrls';
 import type { BackendOptions, LocaleDetectionOptions } from '../shared/type';
 import { getBackendOptions, getLocaleDetectionOptions } from '../shared/utils';
 
@@ -203,6 +211,40 @@ export const i18nPlugin = (
       };
     });
 
+    api.modifyFileSystemRoutes(({ entrypoint, routes }) => {
+      if (!localeDetection) {
+        return { entrypoint, routes };
+      }
+
+      const localeDetectionOptions = getLocaleDetectionOptions(
+        entrypoint.entryName,
+        localeDetection,
+      );
+      const {
+        localePathRedirect,
+        languages = [],
+        localisedUrls,
+      } = localeDetectionOptions;
+
+      if (!localePathRedirect || languages.length === 0) {
+        return { entrypoint, routes };
+      }
+
+      const localisedUrlsConfig = resolveLocalisedUrlsConfig(localisedUrls);
+      if (!localisedUrlsConfig.enabled) {
+        return { entrypoint, routes };
+      }
+
+      return {
+        entrypoint,
+        routes: applyLocalisedUrlsToRoutes(
+          routes as (NestedRouteForCli | PageRoute)[],
+          languages,
+          localisedUrlsConfig.map,
+        ),
+      };
+    });
+
     api._internalServerPlugins(({ plugins }) => {
       const { serverRoutes, metaName } = api.getAppContext();
       const normalizedConfig = api.getNormalizedConfig();

package/src/runtime/I18nLink.tsx

@@ -1,12 +1,12 @@
-import { Link, useInRouterContext, useParams } from '@modern-js/runtime/router';
 import type React from 'react';
 import { useModernI18n } from './context';
+import { useI18nRouterAdapter } from './routerAdapter';
 import { buildLocalizedUrl } from './utils';
 
 export interface I18nLinkProps {
   to: string;
   children: React.ReactNode;
-  [key: string]: any; // Allow other props to be passed through
+  [key: string]: any;
 }
 
 /**
@@ -24,30 +24,25 @@ export interface I18nLinkProps {
  * <I18nLink to="/">Home</I18nLink>
  * ```
  */
-// Use static imports to avoid breaking router tree-shaking. Detect router context via useInRouterContext.
-const useRouterHooks = () => {
-  const inRouter = useInRouterContext();
-  return {
-    Link: inRouter ? Link : null,
-    params: inRouter ? useParams() : ({} as any),
-    hasRouter: inRouter,
-  };
-};
-
 export const I18nLink: React.FC<I18nLinkProps> = ({
   to,
   children,
   ...props
 }) => {
-  const { Link, params, hasRouter } = useRouterHooks();
-  const { language, supportedLanguages } = useModernI18n();
+  const { Link, params, hasRouter } = useI18nRouterAdapter();
+  const { language, supportedLanguages, localisedUrls } = useModernI18n();
 
   // Get the current language from context (which reflects the actual current language)
   // URL params might be stale after language changes, so we prioritize the context language
   const currentLang = language;
 
   // Build the localized URL by adding language prefix
-  const localizedTo = buildLocalizedUrl(to, currentLang, supportedLanguages);
+  const localizedTo = buildLocalizedUrl(
+    to,
+    currentLang,
+    supportedLanguages,
+    localisedUrls,
+  );
 
   // In development mode, warn if used outside of :lang route context
   if (process.env.NODE_ENV === 'development' && hasRouter && !params.lang) {
@@ -57,7 +52,6 @@ export const I18nLink: React.FC<I18nLinkProps> = ({
     );
   }
 
-  // If router is not available, render as a regular anchor tag
   if (!hasRouter || !Link) {
     return (
       <a href={localizedTo} {...props}>

package/src/runtime/context.tsx

@@ -1,15 +1,22 @@
 import { isBrowser } from '@modern-js/runtime';
 import type { FC, ReactNode } from 'react';
-import { createContext, useCallback, useContext, useMemo } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
+import type { LocalisedUrlsOption } from '../shared/localisedUrls';
 import type { I18nInstance } from './i18n';
 import type { SdkBackend } from './i18n/backend/sdk-backend';
 import { cacheUserLanguage } from './i18n/detection';
+import { useI18nRouterAdapter } from './routerAdapter';
 import {
   buildLocalizedUrl,
   detectLanguageFromPath,
   getEntryPath,
   shouldIgnoreRedirect,
-  useRouterHooks,
 } from './utils';
 
 export interface ModernI18nContextValue {
@@ -20,6 +27,7 @@ export interface ModernI18nContextValue {
   languages?: string[];
   localePathRedirect?: boolean;
   ignoreRedirectRoutes?: string[] | ((pathname: string) => boolean);
+  localisedUrls?: LocalisedUrlsOption;
   // Callback to update language in context
   updateLanguage?: (newLang: string) => void;
 }
@@ -47,6 +55,7 @@ export interface UseModernI18nReturn {
   changeLanguage: (newLang: string) => Promise<void>;
   i18nInstance: I18nInstance;
   supportedLanguages: string[];
+  localisedUrls?: LocalisedUrlsOption;
   isLanguageSupported: (lang: string) => boolean;
   // Indicates if translation resources for current language are ready to use
   isResourcesReady: boolean;
@@ -77,15 +86,40 @@ export const useModernI18n = (): UseModernI18nReturn => {
     languages,
     localePathRedirect,
     ignoreRedirectRoutes,
+    localisedUrls,
     updateLanguage,
   } = context;
 
-  // Get router hooks safely
-  const { navigate, location, hasRouter } = useRouterHooks();
+  const { navigate, location, hasRouter } = useI18nRouterAdapter();
+
+  const pathLanguage = useMemo(() => {
+    if (!localePathRedirect || !location?.pathname) {
+      return undefined;
+    }
+    const detected = detectLanguageFromPath(
+      location.pathname,
+      languages || [],
+      localePathRedirect,
+    );
+    return detected.detected ? detected.language : undefined;
+  }, [languages, localePathRedirect, location?.pathname]);
+
+  const currentLanguage = pathLanguage || contextLanguage;
 
-  // Get current language from context (which reflects the actual current language)
-  // URL params might be stale after language changes, so we prioritize the context language
-  const currentLanguage = contextLanguage;
+  useEffect(() => {
+    if (!pathLanguage || pathLanguage === contextLanguage) {
+      return;
+    }
+
+    updateLanguage?.(pathLanguage);
+    i18nInstance?.setLang?.(pathLanguage);
+    void i18nInstance?.changeLanguage?.(pathLanguage);
+
+    if (isBrowser()) {
+      const detectionOptions = i18nInstance.options?.detection;
+      cacheUserLanguage(i18nInstance, pathLanguage, detectionOptions);
+    }
+  }, [contextLanguage, i18nInstance, pathLanguage, updateLanguage]);
 
   /**
    * Changes the current language and updates the URL accordingly.
@@ -147,6 +181,7 @@ export const useModernI18n = (): UseModernI18nReturn => {
               relativePath,
               newLang,
               languages || [],
+              localisedUrls,
             );
             const newUrl =
               entryPath + newPath + location.search + location.hash;
@@ -181,6 +216,7 @@ export const useModernI18n = (): UseModernI18nReturn => {
               relativePath,
               newLang,
               languages || [],
+              localisedUrls,
             );
             const newUrl =
               entryPath +
@@ -206,6 +242,7 @@ export const useModernI18n = (): UseModernI18nReturn => {
       updateLanguage,
       localePathRedirect,
       ignoreRedirectRoutes,
+      localisedUrls,
       languages,
       hasRouter,
       navigate,
@@ -275,6 +312,7 @@ export const useModernI18n = (): UseModernI18nReturn => {
     changeLanguage,
     i18nInstance,
     supportedLanguages: languages || [],
+    localisedUrls,
     isLanguageSupported,
     isResourcesReady,
   };

package/src/runtime/hooks.ts

@@ -2,6 +2,7 @@ import type { TRuntimeContext } from '@modern-js/runtime';
 import { isBrowser } from '@modern-js/runtime';
 import type React from 'react';
 import { useEffect, useRef } from 'react';
+import type { LocalisedUrlsOption } from '../shared/localisedUrls';
 import type { I18nInstance } from './i18n';
 import {
   getI18nSdkBackendId,
@@ -9,13 +10,13 @@ import {
   type I18nSdkResourcesLoadedEventDetail,
 } from './i18n/backend/sdk-event';
 import { cacheUserLanguage } from './i18n/detection';
+import { useI18nRouterAdapter } from './routerAdapter';
 import {
   buildLocalizedUrl,
   detectLanguageFromPath,
   getEntryPath,
   getPathname,
   shouldIgnoreRedirect,
-  useRouterHooks,
 } from './utils';
 
 interface RuntimeContextWithI18n extends TRuntimeContext {
@@ -41,6 +42,7 @@ export function createContextValue(
   languages: string[],
   localePathRedirect: boolean,
   ignoreRedirectRoutes: string[] | ((pathname: string) => boolean) | undefined,
+  localisedUrls: LocalisedUrlsOption | undefined,
   setLang: (lang: string) => void,
 ) {
   const instance = i18nInstance || createMinimalI18nInstance(lang);
@@ -51,6 +53,7 @@ export function createContextValue(
     languages,
     localePathRedirect,
     ignoreRedirectRoutes,
+    localisedUrls,
     updateLanguage: setLang,
   };
 }
@@ -162,10 +165,10 @@ export function useClientSideRedirect(
   languages: string[],
   fallbackLanguage: string,
   ignoreRedirectRoutes?: string[] | ((pathname: string) => boolean),
+  localisedUrls?: LocalisedUrlsOption,
 ) {
   const hasRedirectedRef = useRef(false);
-  // Get router hooks safely
-  const { navigate, location, hasRouter } = useRouterHooks();
+  const { navigate, location, hasRouter } = useI18nRouterAdapter();
 
   useEffect(() => {
     if (process.env.MODERN_TARGET !== 'browser') {
@@ -220,7 +223,12 @@ export function useClientSideRedirect(
     const targetLanguage =
       i18nInstance.language || fallbackLanguage || languages[0] || 'en';
 
-    const newPath = buildLocalizedUrl(relativePath, targetLanguage, languages);
+    const newPath = buildLocalizedUrl(
+      relativePath,
+      targetLanguage,
+      languages,
+      localisedUrls,
+    );
     const newUrl = entryPath + newPath + currentSearch + currentHash;
 
     if (newUrl !== currentPathname + currentSearch + currentHash) {
@@ -244,6 +252,7 @@ export function useClientSideRedirect(
     languages,
     fallbackLanguage,
     ignoreRedirectRoutes,
+    localisedUrls,
   ]);
 }
 

package/src/runtime/i18n/backend/defaults.ts

@@ -15,7 +15,9 @@ function convertPath(path: string | undefined): string | undefined {
   }
   // If it's an absolute path (starts with /), convert to relative path
   if (path.startsWith('/')) {
-    return `${window.__assetPrefix__ || ''}${path}`;
+    return typeof window === 'undefined'
+      ? path
+      : `${window.__assetPrefix__ || ''}${path}`;
   }
   return path;
 }

package/src/runtime/i18n/backend/middleware.node.ts

@@ -1,4 +1,4 @@
-import Backend from 'i18next-fs-backend';
+import Backend from 'i18next-fs-backend/cjs';
 import type { ExtendedBackendOptions } from '../../../shared/type';
 import type { I18nInstance } from '../instance';
 import { useI18nextBackendCommon } from './middleware.common';

package/src/runtime/i18n/instance.ts

@@ -1,5 +1,9 @@
 import type { BaseBackendOptions } from '../../shared/type';
 
+type ReactI18nextModule = typeof import('react-i18next');
+type InitReactI18next = ReactI18nextModule['initReactI18next'];
+type I18nextProviderComponent = ReactI18nextModule['I18nextProvider'];
+
 export interface I18nResourceStore {
   data?: {
     [language: string]: {
@@ -167,10 +171,15 @@ async function createI18nextInstance(): Promise<I18nInstance | null> {
   }
 }
 
-async function tryImportReactI18next() {
+function getOptionalReactI18nextPackageName(): string {
+  return ['react', 'i18next'].join('-');
+}
+
+async function tryImportReactI18next(): Promise<ReactI18nextModule | null> {
   try {
-    const reactI18next = await import('react-i18next');
-    return reactI18next;
+    return (await import(
+      getOptionalReactI18nextPackageName()
+    )) as ReactI18nextModule;
   } catch (error) {
     return null;
   }
@@ -210,7 +219,7 @@ export async function getI18nInstance(
   throw new Error('No i18n instance found');
 }
 
-export async function getInitReactI18next() {
+export async function getInitReactI18next(): Promise<InitReactI18next | null> {
   const reactI18nextModule = await tryImportReactI18next();
   if (reactI18nextModule) {
     return reactI18nextModule.initReactI18next;
@@ -218,7 +227,7 @@ export async function getInitReactI18next() {
   return null;
 }
 
-export async function getI18nextProvider() {
+export async function getI18nextProvider(): Promise<I18nextProviderComponent | null> {
   const reactI18nextModule = await tryImportReactI18next();
   if (reactI18nextModule) {
     return reactI18nextModule.I18nextProvider;