Dynamic Import wrong path

Question

I'm trying to load locale files based on the locale code given by Next.js. But whenever I'm trying to do a dynamic import, an error happens and the import path is wrong:

Unable to load translation file "index": Error: Cannot find module './index.en.json'

Code to import:

    try {
        Object.assign(messages, await import(`@/locales/${name}.${locale}.json`))
    } catch(err) {
        console.log(`Unable to load translation file "${name}": ${err}`)
        error = err
    }

tsconfig.json:

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

next.config.js with webpack config:

module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en',
  },
  webpack: (config) => {
    config.resolve.alias[`@/locales`] = path.resolve(__dirname, "locales")

    return config
  }
}

EDIT:

Okay, I found my mistake, the file was named index.de.json instead of index.en.json . But still I want to know why the error message shows a wrong path.

Answer 1

You can try with this way. If it does not work please check @/locales/ path was correctly set.

Example:

  import(`@/locales/${name}.${locale}.json`).then((json) => {
    console.log(json)
    Object.assign(messages, json)
  }).catch((err) => {
    console.log(`Unable to load translation file "${name}": ${err}`)
    error = err
  });