Nuxt i18n: Failed to resolve import “locales/en.json” (Does the file exist?)

Question

Description:

I’m facing an issue while setting up the @nuxtjs/i18n module in my Nuxt 3 project. When I run the application, I get the following error:

Failed to resolve import "../i18n/locales/en.json" from ".nuxt/i18n.options.mjs". Does the file exist?

Project Structure:

The JSON files are located in the locales folder, at the root of the project.

Code:

nuxt.config.ts file :

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ["~/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: [
    "@nuxtjs/i18n",
    "@nuxt/icon",
    "@vueuse/motion/nuxt",
    "@nuxtjs/google-fonts",
  ],
  i18n: {
    lazy: true,
    langDir: "locales/",
    strategy: "prefix_and_default",
    locales: [
      { code: "en", name: "English", iso: "en-US", file: "en.json" },
      { code: "fr", name: "Français", iso: "fr-FR", file: "fr.json" },
    ],
    defaultLocale: "en",
  },
  googleFonts: {
    families: {
      Inter: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    },
    display: "swap",
  },
});

Here’s the content of my en.json file for testing purposes:

{
  "welcome": "Welcome"
}

Steps I’ve already tried:

1. Verified the project structure and file paths.
2. Added a trailing / to the langDir in the configuration.

Hope someone can unlock this.

Thank you for your time.

Answer 1

Ok I just added ../ before the path to locales folder... Not written in the doc!

Answer 2

I tried with: i18n\locales\eng.json

my nuxt.config was:-
i18n: {
 locales: [
  { code: 'en', name: 'English', iso: 'en-US', file: 'en.json' },
  { code: 'ar', name: 'Arabic', iso: 'ar-AE', file: 'ar.json' },
 ],
 defaultLocale: 'en',
 lazy: true,
 langDir: 'locales/',
 vueI18n: './i18n.config.ts',
},

and this worked fine for me.