I can´t deploy a nuxt3 project with i18n Plugin

Question

I have a project developed in Nuxt 3, and I built and deployed it to host it on the Netlify website, and everything went smoothly. The project was live without any errors, and everything was fine.

Afterward, I decided to develop the project in multiple languages. I installed the i18n plugin in the project and adjusted all the files. In my local environment, everything is working perfectly. However, when I deploy it and put the site live, it stopped working. The build and deploy logs do not point to any errors, but the site displays the following error:

500 Cannot read properties of undefined (reading 'source')

I have been researching and looking for a solution for some time now. I've tried contacting support and the Netlify forum but haven't found a solution yet.

Below, I list some code snippets for verification to see if everything is okay:

nuxt.config.ts

import i18nConfig from './i18n.config'

export default defineNuxtConfig({
    // Other configurations ...

    modules: ['@pinia/nuxt', '@nuxtjs/i18n'],

    i18n: i18nConfig,
})

i18n.config.js (at the root of the project)

// i18n.config.js
export default {
    locales: [
        {
            name: 'English',
            code: 'en',
            iso: 'en',
            file: 'en.js',
        },
        {
            name: 'Português',
            code: 'pt',
            iso: 'pt',
            file: 'pt.js',
        },
        {
            name: 'Español',
            code: 'es',
            iso: 'es',
            file: 'es.js',
        },
        {
            name: 'Français',
            code: 'fr',
            iso: 'fr',
            file: 'fr.js',
        },
        {
            name: 'Italiano',
            code: 'it',
            iso: 'it',
            file: 'it.js',
        },
        {
            name: 'Deutsch',
            code: 'de',
            iso: 'de',
            file: 'de.js',
        },
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'lang/',
    strategy: 'prefix_except_default',
    // vueI18n: {
    //     fallbackLocale: "en-US",
    //   },
}

The "lang" folder is located at the root of the project, and inside it, there is a file.js for each language, e.g., en.js:

export default {
    themeColor: 'Theme Mode',
    navbar: {
        home: 'Home',
        about: 'About',
        experiences: 'Experiences',
        academics: 'Academics',
        skills: 'Skills',
    },
    ...

An example of how I use it in components:

<h1 class="text homeTitle uppercase white d-flex flex-column flex-xl-row justify-content-center align-items-center">
    {{ $t('home.mainText') }}
</h1>

In some dynamic components, I had to create an object with content, and the only way I managed to do it was by using "loc.source," as in the example below. I'm sending the entire component here for better understanding, and I believe the error may be in these components. Even though it works locally, I think Netlify handles something differently internally that I can't explain.

<template>
    <div>
        <div class="container-fluid">
            <div class="hexagon-cards d-flex justify-content-center align-items-center flex-wrap">
                <div class="col-6 col-md-4 col-lg-3 hexagon-cards-item" v-for="mySkill in mySkills" :key="`mySkill-item-${mySkill.id}`">
                    <SkillsLanguageItem :value="mySkill" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import skill from '@/assets/images/skills/skill'

const { t, tm } = useI18n()

const mySkillsLang = tm('skills.languages')

const mySkills = mySkillsLang.map((skill) => ({
    skillTitle: skill.skillTitle.loc.source,
    skillImage: getCertificateImagePath(skill.skillImage.loc.source),
    skillKnowledge: skill.skillKnowledge.loc.source,
}))

function getCertificateImagePath(name) {
    return skill[name]
}
</script>

I couldn't find another way to make the objects I need to use with "source" work as mentioned above. However, it works in my local environment. So, I tried to check for possible configurations in Netlify, but without success.

netlify.toml

[build]
  publish = "dist"

config.yml

i18n:
    structure: multiple_folders
    locales: [de, en, es, fr, it, pt]
    default_locale: en

Please, if anyone knows how to give any advice, I would greatly appreciate it, and I am available to provide more details if necessary.

Answer 1

I have i18n.config.ts as a separate file in app root with no direct reference from nuxt.config.ts. The file structure looks like this:

export default defineI18nConfig(() => ({
  ...
})

And it just works outside the box. My app is deployed on netlify and running smoothly. Repo here if you wanna have deeper look.

---

Maybe you should also try what is described in the docs - the config should be nested inside i18n option:

export default defineNuxtConfig({
    // Other configurations ...

    modules: ['@pinia/nuxt', '@nuxtjs/i18n'],

    i18n: {
        vueI18n: i18nConfig
    },
})

And/or change your i18n config file to provide export default defineI18nConfig(() => ({ ... }) and not just plain JS object.