Cannot find module 'virtual:i18next-loader' or its corresponding type declarations

[marcopelegrini]

I'm pretty new to vite and i18next, so this is probably my mistake, but I'm getting the following error when I try to setup the loader, any advice?

yarn run v1.22.19
src/i18n.tsx:6:23 - error TS2307: Cannot find module 'virtual:i18next-loader' or its corresponding type declarations.

6 import resources from 'virtual:i18next-loader';
                        ~~~~~~~~~~~~~~~~~~~~~~~~```

[alveshelio]

Were you able to solve the issue? I'm getting the same error.

[marcopelegrini]

No, I've moved to i18next-resources-to-backend, loading like so:

This gives me type safety, bundling and dynamic load in the client

import { initReactI18next } from "react-i18next";
import en from "@locales/en/translation.json";
import resourcesToBackend from "i18next-resources-to-backend";

export const resources = {
    en: {
        translation: en,
    },
};

use(initReactI18next)
    .use(
        resourcesToBackend((language, namespace, callback) => {
            // English is loaded as a resource to allow for type safety checks,
            // so we'll ignore dynamic loading for it
            if (language !== "en") {
                import(`../locales/${language}/${namespace}.json`)
                    .then((resources) => {
                        callback(null, resources);
                    })
                    .catch((error) => {
                        callback(error, null);
                    });
            }
        }),
    )
    .init({
        resources,
        fallbackLng: "en",
        partialBundledLanguages: true,
        interpolation: {
            escapeValue: false,
        },
    })
    .then();

export default i18n;

[thangngoc89]

To solve the typescript error, you only need to do this:

Add a i18n.d.ts anywhere in your src folder.

// i18n.d.ts
declare module "virtual:i18next-loader" {
  // eslint-disable-next-line
  const resources: any;
  export default resources;
}

[liel-almog]

No, I've moved to i18next-resources-to-backend, loading like so:

This gives me type safety, bundling and dynamic load in the client

import { initReactI18next } from "react-i18next";
import en from "@locales/en/translation.json";
import resourcesToBackend from "i18next-resources-to-backend";

export const resources = {
    en: {
        translation: en,
    },
};

use(initReactI18next)
    .use(
        resourcesToBackend((language, namespace, callback) => {
            // English is loaded as a resource to allow for type safety checks,
            // so we'll ignore dynamic loading for it
            if (language !== "en") {
                import(`../locales/${language}/${namespace}.json`)
                    .then((resources) => {
                        callback(null, resources);
                    })
                    .catch((error) => {
                        callback(error, null);
                    });
            }
        }),
    )
    .init({
        resources,
        fallbackLng: "en",
        partialBundledLanguages: true,
        interpolation: {
            escapeValue: false,
        },
    })
    .then();

export default i18n;

@marcopelegrini Cloud you please give more information about the set up. Where is the @ locales folder and do you have several namespaces or just on. Do you store it on memory or in a remote server?

[rosskevin]

Yes, here is my vite.d.ts that I keep locally, though the above is slightly more strict with regards to the definition of this virtual module.

/// <reference types="vite/client" />

type Booly = 'true' | 'false'

// https://vitejs.dev/guide/env-and-mode.html
interface ImportMetaEnv {
  readonly APP_VERSION: string
  readonly STRIPE_PUBLISHABLE_KEY: string
  readonly STORYBOOK: Booly
  readonly INTEGRATION_TEST: Booly // set to reduce durations for faster ui testing
  readonly GOOGLE_ANALYTICS_KEY: string
  readonly INTERCOM_APP_ID: string
  readonly SENTRY_DSN: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
  readonly hot?: ViteHotContext
}

type ModuleNamespace = Record<string, any> & {
  [Symbol.toStringTag]: 'Module'
}

// https://vitejs.dev/guide/api-hmr.html
interface ViteHotContext {
  readonly data: any

  // accept(): void
  accept(cb?: (mod: ModuleNamespace | undefined) => void): void
  accept(dep: string, cb: (mod: ModuleNamespace | undefined) => void): void
  accept(deps: readonly string[], cb: (mods: Array<ModuleNamespace | undefined>) => void): void

  dispose(cb: (data: any) => void): void
  decline(): void
  invalidate(): void

  // `InferCustomEventPayload` provides types for built-in Vite events
  on<T extends string>(event: T, cb: (payload: InferCustomEventPayload<T>) => void): void
  send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void
}

// Allow for virtual module imports
// https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
declare module 'virtual:*'