i18n and vite - how to benefit from TypeSafety, proper asset management and no warning

[moebiuscorzer]

Context

Vite indicates in its documentation that assets that are never imported at build time can be in the public/ folder.

On the other hand, to benefit from type-safety, i18n suggests to import the locales file.

Finally, they need to be in the public folder, otherwise they are not included by vite in the assets.

My code

The i18n.ts contains the following:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import common from "../public/locales/en-GB/common.json";
import login from "../public/locales/en-GB/login.json";
import signup from "../public/locales/en-GB/signup.json";

export const defaultNS = "common";
export const resources = {
  en: {
    common,
    login,
    signup,
  },
} as const;

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    lng: "en-GB",
    fallbackLng: "en-GB",
    ns: Object.keys(resources.en),
    defaultNS: defaultNS,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Issue

The vite bundler issues warnings:

Assets in public directory cannot be imported from JavaScript.
If you intend to import that asset, put the file in the src directory, and use /src/locales/en-GB/common.json instead of /public/locales/en-GB/common.json.
If you intend to use the URL of that asset, use /locales/en-GB/common.json?url.
Assets in public directory cannot be imported from JavaScript.

Additionally, if I put those locales directly into the public directory, there is a risk new versions might not be served properly (as cache-busting will not work).

Request

What is the proper way to manage this?

[moebiuscorzer]

After investigation, I ended up defining them in src/locales and using vite-plugin-static-copy and defining the following rule in vite.config.js:

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: "src/locales",
          dest: "./", // copied to dist/locales/
        },
      ],
    }),
/* ... */
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
/* ... */

This copies them from src/locales to dist/locales and that is where the i18n backend expects them by default.

Accordingly, I updated my imports as follows (where @ is the alias to src):

import common from "@/locales/en-GB/common.json";
import login from "@/locales/en-GB/login.json";
import signup from "@/locales/en-GB/signup.json";