title: next-translate Cannot find module './locales/en/common.json'
body: <p>I am trying to integrate the <code>next-translate</code> library into my Next app, however I am getting an error when configuring the <code>loadLocaleFrom</code> function</p>
  <p>This is what my i18n.js file looks like:</p>
  <pre><code>module.exports = {
    locales: [&quot;en&quot;, &quot;fr&quot;, &quot;es&quot;, &quot;ru&quot;, &quot;ar&quot;, &quot;zh&quot;, &quot;hi&quot;, &quot;sw&quot;],
    defaultLocale: &quot;en&quot;,
    pages: {
      &quot;*&quot;: [&quot;common&quot;],
      &quot;/&quot;: [&quot;home&quot;],
    },
    loadLocaleFrom: async (lang, ns) =&gt; {
      try {
        const m = await import(`./locales/${lang}/${ns}.json`);
  
        return {
          ...m.default,
        };
      } catch (error) {
        console.log(error);
      }
    },
  };
  </code></pre>
  <p>And my next.config file:</p>
  <pre><code>const withPlugins = require(&quot;next-compose-plugins&quot;);
  const withImages = require(&quot;next-images&quot;);
  const nextTranslate = require(&quot;next-translate&quot;);
  
  module.exports = withPlugins([withImages, nextTranslate], {
    reactStrictMode: true,
    images: {
      disableStaticImages: true,
    },
  });
  </code></pre>
  <p>package.json version:</p>
  <pre><code>next-translate: ^1.5.0
  next: 12.1.6
  react: 17.0.2
  </code></pre>
  <p>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:</p>
  <pre><code>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 (&lt;anonymous&gt;)
      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'
  }
  </code></pre>
  <p>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
  <a href="https://i.stack.imgur.com/YUDre.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YUDre.png" alt="enter image description here" /></a></p>