TypeScript+i18next浏览器报错：无法解析模块标识符'i18next'

问题根源 #

浏览器原生ES模块系统不支持直接引用i18next这类裸模块名，仅识别以/、./或../开头的相对/绝对路径，你的配置直接使用裸模块导入，导致解析失败。

可行解决方案 #

1. 使用打包工具（推荐） #

浏览器本身无法处理npm包的模块解析逻辑，需借助Vite、Webpack或Rollup等打包工具，将代码与依赖打包为浏览器可识别的文件：

• 以Vite为例，初始化TypeScript项目后，现有导入语法无需修改，工具会自动处理npm模块解析。
• 执行打包命令后，在HTML中引入dist目录下的入口文件即可正常运行。

2. 改用ES模块CDN地址 #

在i18n配置文件中直接引用CDN提供的ES模块版本：

import i18next from 'https://cdn.jsdelivr.net/npm/i18next@23.7.11/esm/i18next.min.js';

export const defaultNS = 'common';
i18next.init({
    lng: 'en',
    fallbackLng: 'en',
    debug: true,
    resources: {
        en: {
            // 你的翻译资源
        },
        de: {
            // 你的翻译资源
        },
    },
});
export default i18next;

注意替换为对应版本的CDN地址。

3. 配置TypeScript路径映射+打包工具 #

在tsconfig.json中添加路径映射，将裸模块指向本地node_modules中的文件，但仍需配合打包工具才能在浏览器运行：

{
  "compilerOptions": {
    "module": "ESNext",
    "baseUrl": ".",
    "paths": {
      "i18next": ["node_modules/i18next/esm/index.js"]
    },
    "moduleResolution": "NodeNext"
  }
}

4. 使用i18next的UMD版本 #

在HTML中通过<script>标签引入UMD版本，将其变为全局变量：

<script src="https://cdn.jsdelivr.net/npm/i18next@23.7.11/dist/i18next.min.js"></script>

然后在TypeScript文件中声明全局变量：

declare const i18next: import('i18next').i18n;

export const defaultNS = 'common';
i18next.init({
    // 配置内容
});
export default i18next;

这种方式无需打包，可直接在浏览器运行。

内容的提问来源于stack exchange，提问作者forma