./i18n.js Critical dependency: the request of a dependency is an expression

Today after doing some package updates e.g. next@12.1.6 next-translate crashes while trying to load the locale. Im importing my locales from a package inside my monorepo with:

./i18n.js

loadLocaleFrom: (locale, namespace) =>
    import(`locales/${locale}/${namespace}`).then((m) => m.default),

That worked for me for like 2 months now. But now i get following error:

./i18n.js
Critical dependency: the request of a dependency is an expression

After a while of trial and error i got my code working with:

  loadLocaleFrom: (locale, namespace) =>
    require(`locales/${locale}/${namespace}`),

Is the error here with me or is there a package error?

[aralroca]

Of course, it is not the right solution, but until we find the best way to fix it (all suggestions are welcome), you can do a workaround and not use the loadLocaleFrom inside i18n.js and overwrite the default:

const workaround = require('next-translate/lib/cjs/plugin/utils.js')

// As a workaround you can change the string of the defaultLoader, this is working fine
workaround.defaultLoader = '(l, n) => import(`@next-translate-root/src/locales/${l}/${n}.json`).then(m => m.default)';

module.exports = {
  ...config,
  // loadLocaleFrom: (lang, ns) =>
  //   import(`./src/locales/${lang}/${ns}.json`).then((m) => m.default),
}

Any suggestions from anyone on how to fix it internally in the library? Thanks!

[derkoe]

We have the same problem and also fixed it with require (like https://github.com/vinissimus/next-translate/issues/851#issuecomment-1116090210).

We also had to catch the error on the require because not all of the files exist (we implement a fallback logic for country-specific locales like “es-CL” and then fallback to English):

  const englishTexts = require('./locales/en/myapp.json');
  ...
  loadLocaleFrom: (locale, ns) => {
    let countrySpecific = {},
      languageOnly = {};
    try {
      countrySpecific = require(`locales/${locale.replace('-', '_')}/${ns}.json`);
    } catch (error) {}
    try {
      languageOnly = require(`./locales/${locale.substring(0, 2)}/${ns}.json`);
    } catch (error) {}
    return _.merge({}, englishTexts, languageOnly, countrySpecific);
  },