在Next.js中使用i18next动态导入locales时出现模块未找到错误

问题详情 #

按照Next.js集成i18next的教程操作，其余步骤均正常，在app目录添加i18n.ts文件后，出现模块未找到错误，报错位置为resourcesToBackend函数内的动态导入语句。

涉及代码 #

app/i18n.ts

import { createInstance } from "i18next";
import { initReactI18next } from "react-i18next/initReactI18next";
import resourcesToBackend from "i18next-resources-to-backend";
import { i18nConfig } from "@/config/i18Config";

export default async function initTranslations(
  locale: string,
  namespaces: string[],
  i18nInstance?: any,
  resources?: any
) {
  i18nInstance = i18nInstance || createInstance();

  i18nInstance.use(initReactI18next);

  if (!resources) {
    i18nInstance.use(
      resourcesToBackend((language: "en" | "ar", namespace: string) => {
        // 此处报错：模块未找到
        return import(`@/locales/${language}/${namespace}.json`);
      })
    );
  }

  await i18nInstance.init({
    lng: locale,
    resources,
    fallbackLng: i18nConfig.defaultLocale,
    supportedLngs: i18nConfig.locales,
    defaultNS: namespaces[0],
    fallbackNS: namespaces[0],
    ns: namespaces,
    preload: resources ? [] : i18nConfig.locales,
  });

  return {
    i18n: i18nInstance,
    resources: i18nInstance.services.resourceStore.data,
    t: i18nInstance.t,
  };
}

已配置的tsconfig.json路径

"paths": {
      "@/*": ["./src/*"]
    }

已配置的next.config.js webpack别名

webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname, "src");
    return config;
  },

解决方案 #

1. 替换动态导入的别名为相对路径 #

webpack别名在动态导入的模板字符串中可能无法被正确解析，直接使用相对路径（根据i18n.ts的位置调整）：

resourcesToBackend((language: "en" | "ar", namespace: string) => {
  // 假设i18n.ts在app目录，locales在src/locales，用../回到src层级
  return import(`../locales/${language}/${namespace}.json`);
})

2. 校验locales文件结构与命名 #

• 确认src/locales下存在en、ar两个目录
• 每个语言目录下必须有对应namespace的json文件，比如调用时传入common作为namespace，就需要src/locales/en/common.json和src/locales/ar/common.json
• 文件名与namespace严格匹配（大小写敏感）

3. 完善webpack配置，确保json文件被正确处理 #

在next.config.js的webpack配置中明确添加json文件解析规则：

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname, "src");
    // 确保json文件能被webpack正确解析
    config.module.rules.push({
      test: /\.json$/,
      type: "json/auto",
    });
    return config;
  },
};

4. 修正tsconfig的baseUrl配置 #

确保tsconfig.json的baseUrl与paths配合生效：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

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