vite-intlayer

8.7.7 verified Mon Apr 27 auth: no javascript maintenance

A Vite plugin for seamless internationalization (i18n) in Vite projects. Current stable version is 8.7.7, but note that recent releases show a separate version track (2.0.13) for the intlayer ecosystem; the plugin integrates with @intlayer/core for locale detection, redirection, and environment-based configuration. It ships TypeScript types and requires Vite >=4.0.0. Key differentiators: tight integration with Intlayer's dictionary system, automatic locale-based redirects, and support for React and other frameworks via companion compilers.

Common errors

error Error: Cannot find module 'vite-intlayer' ↓

cause The package is not installed or is installed under an old name.

fix

Run 'npm install vite-intlayer' and ensure your import matches the package name.

error TypeError: viteIntlayer is not a function ↓

cause Default import was used instead of named import.

fix

Change import to: import { viteIntlayer } from 'vite-intlayer'

error [vite] Internal server error: Failed to resolve import "@intlayer/config" from "vite-intlayer" ↓

cause Missing peer dependency @intlayer/config.

fix

Install @intlayer/config: npm install @intlayer/config

error ERROR: The 'redirect' option is not allowed. Use 'localeDetection.redirect' instead. ↓

cause Using deprecated configuration key.

fix

Move redirect option under localeDetection object as documented.

Warnings

breaking In version 2.x, the plugin was renamed from 'vite-plugin-intlayer' to 'vite-intlayer'. Update your imports. ↓

fix Replace 'vite-plugin-intlayer' with 'vite-intlayer' in package.json and imports.

deprecated The 'redirect' option in plugin configuration has been deprecated; use 'localeDetection.redirect' instead. ↓

fix Move redirect configuration under localeDetection: { redirect: ... }.

gotcha If using TypeScript, ensure 'strict' mode is enabled to avoid type errors with locale dictionaries. ↓

fix Set 'strict: true' in tsconfig.json.

gotcha The plugin expects Vite's resolve.alias to be configured if you have custom locale directory paths; otherwise locales may not be found. ↓

fix Add an alias in vite.config.ts: resolve: { alias: { '@intlayer/locales': path.resolve(__dirname, 'locales') } }.

deprecated Support for Node.js <14.18 is deprecated; future versions may require Node >=16. ↓

fix Upgrade Node.js to version 16 or later.

Install

npm install vite-intlayer

yarn add vite-intlayer

pnpm add vite-intlayer

Imports

viteIntlayer

wrong

import viteIntlayer from 'vite-intlayer'

correct

import { viteIntlayer } from 'vite-intlayer'

This is a named export, not a default export.

defineConfig
```
import { defineConfig } from 'vite'
```
Part of Vite's core, but often confused as an export from vite-intlayer.
IntlayerPluginOptions
```
import type { IntlayerPluginOptions } from 'vite-intlayer'
```
TypeScript only; use 'import type' for type imports.

default (CommonJS)

wrong

const viteIntlayer = require('vite-intlayer')

correct

const { viteIntlayer } = require('vite-intlayer')

vite-intlayer does not have a default export in CJS; use destructuring.

Quickstart

Shows how to add the vite-intlayer plugin to a Vite config file, with import and usage.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteIntlayer } from 'vite-intlayer';

export default defineConfig({
  plugins: [
    react(),
    viteIntlayer({
      // Configuration options (optional)
      // locales: ['en', 'fr', 'es'],
      // defaultLocale: 'en',
    }),
  ],
});