下一个翻译找不到模块'./locales/en/common.json'

Question

I am trying to integrate the next-translate library into my Next app, however I am getting an error when configuring the loadLocaleFrom function

This is what my i18n.js file looks like:

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);
    }
  },
};

And my next.config file:

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,
  },
});

package.json version:

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

Even though my directory has both, the common.json and the home.json files in the correct folder structure, the loadLocaleFrom function still throws an error that looks like this:

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'
}

I did try using the appWithI18n hoc in _app.js but that doesn't solve it too. I also did try moving the locales to a different directory under src but that shouldn't make a difference. The image shows my directory structure

Answer 1

require worked for me instead of import

await require(`./locales/${lang}/${ns}.json`)