Next.js集成next-translate时loadLocaleFrom报错：找不到指定模块

问题概述 #

在Next.js应用中集成next-translate库，配置loadLocaleFrom函数后，出现模块找不到错误，尽管翻译文件已按正确目录结构放置。

配置文件详情 #

i18n.js #

module.exports = {
  locales: ["en", "fr", "es", "ru", "ar", "zh", "hi", "sw"],
  defaultLocale: "en",
  pages: {
    "*": ["common"],
    "/": ["home"],
  },
  loadLocaleFrom: async (lang, ns) => {
    try {
      const m = await import(`./locales/${lang}/${ns}.json`);

      return {
        ...m.default,
      };
    } catch (error) {
      console.log(error);
    }
  },
};

next.config.js #

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const nextTranslate = require("next-translate");

module.exports = withPlugins([withImages, nextTranslate], {
  reactStrictMode: true,
  images: {
    disableStaticImages: true,
  },
});

依赖版本 #

next-translate: ^1.5.0
next: 12.1.6
react: 17.0.2

错误日志 #

Error: Cannot find module './locales/en/common.json'
    at webpackEmptyContext (D:\projects\mk\mk-academy\.next\server\pages\index.js:529:10)
    at eval (webpack-internal:///./i18n.js:64:89)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.loadLocaleFrom (webpack-internal:///./i18n.js:63:23)
    at async Promise.all (index 0) {
  code: 'MODULE_NOT_FOUND'
}

已尝试的无效操作 #

• 在_app.js中使用appWithI18n高阶组件
• 将locales目录移至src目录下

目录结构说明：项目根目录下存在locales文件夹，内部包含en、fr等语言子目录，每个子目录中都有common.json和home.json翻译文件。

解决方法 #

1. 修复动态导入路径的webpack解析问题 #

Next.js的webpack对动态导入的路径解析有限制，需确保路径模板可被静态分析。修改loadLocaleFrom函数，添加webpack chunk注释并简化返回逻辑：

loadLocaleFrom: async (lang, ns) => {
  try {
    // 添加webpackChunkName注释帮助打包工具识别
    const m = await import(/* webpackChunkName: "locale-[lang]-[ns]" */ `./locales/${lang}/${ns}.json`);
    return m.default;
  } catch (error) {
    console.error('加载翻译文件失败:', error);
    return {}; // 返回空对象避免页面崩溃
  }
},

2. 调整next-compose-plugins的插件顺序 #

将nextTranslate放在withImages之前，确保翻译库的webpack配置优先生效：

module.exports = withPlugins([nextTranslate, withImages], {
  reactStrictMode: true,
  images: {
    disableStaticImages: true,
  },
});

3. 检查next-translate版本兼容性 #

next-translate 1.x版本与Next.js 12.x存在部分兼容性问题，建议升级next-translate到v2.x（注意v2有API变更，需参考官方文档调整配置），或降级到与Next.js 12.1.6匹配的稳定版本。

4. 确保json文件被webpack正确处理 #

在next.config.js中显式添加json文件扩展名支持：

module.exports = withPlugins([nextTranslate, withImages], {
  reactStrictMode: true,
  images: {
    disableStaticImages: true,
  },
  webpack: (config) => {
    config.resolve.extensions.push('.json');
    return config;
  }
});

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