Using Vite I always end up with "[intlify] Not found '...' key in '...' locale messages."

[Vectrex]

Setup is

package.json

{
  "name": "my-project",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@heroicons/vue": "^1.0.6",
    "@tailwindcss/forms": "^0.5.2",
    "tailwindcss": "^3.0.24",
    "vue": "^3.2.37",
    "vue-i18n": "^9.1.10"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^5.0.0",
    "@vitejs/plugin-vue": "^3.0.0",
    "@vue/cli-service": "^5.0.8",
    "@vue/compiler-sfc": "^3.2.37",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "vite": "3.0.0",
    "vue-router": "^4.1.2"
  }
}

vite.config.js

import { fileURLToPath, URL } from 'url'
const { defineConfig } = require('vite')
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  plugins: [
      vue(),
      vueI18n({
        // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
        // compositionOnly: false,
        // include: path.resolve(__dirname, './path/to/src/locales/**')
      })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

index.js

import './index.css'
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    ja: {
        message: {
            hello: 'こんにちは、世界'
        }
    }
}

const i18n = createI18n({
    globalInjection: true,
    locale: 'ja',
    fallbackLocale: 'en',
    messages,
})

const app = createApp(App);
app.use(i18n).mount('#app');

and finally App.vue

<script setup>
</script>

<template>
  <div class="flex justify-center text-3xl py-16">{{ $t('message') }}</div>
</template>

<script>
export default {}
</script>

npm run dev and navigating to localhost:<port> Will always display "message" and the console tells me

[intlify] Not found 'message' key in 'ja' locale messages.
[intlify] Fall back to translate 'message' key with 'en' locale.
[intlify] Not found 'message' key in 'en' locale messages.

What am I missing?

[Vectrex]

Fixed it (partially):
The example here https://vue-i18n.intlify.dev/guide/#html is erroneous. It has to be

const messages = {
    en: {
        hello: 'hello world'
    },
    ja: {
        hello: 'こんにちは、世界'
    },
    de: {
        hello: 'hi!'
    },
}

/*
doesn't work

const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    ja: {
        message: {
            hello: 'こんにちは、世界'
        }
    },
    de: {
        message: {
            hello: 'hi!'
        }
    }
}
*/

const i18n = createI18n({
    globalInjection: true,
    locale: 'ja',
    fallbackLocale: 'en',
    legacy: false,
    messages
})

[folmert]

What if I don't have messages beforehand and get them from API?

[khojabergen]

this should do the work:

import kk_loc from "/locale/kk.js";
import en_loc from "/locale/en.js";

const i18n = createI18n({
    locale: 'ja',
    fallbackLocale: 'en',
    warnHtmlInMessage: "off",
    messages: {
        kk: kk_loc,
        en: en_loc,
    }
})

and localization js file looks like this:

export default {
    action: "hello there"
}

[FairyFanFan]

thx! i fix it with your tip ! cause in my localization js i used to write thisconst en ={};export {en}

[diogoterremoto]

Finally, this worked in my Nuxt app!

[JakobMiksch]

In my vuetify setup I fixed it like this:

import { createI18n } from "vue-i18n"
import { de as vuetifyDe, en as vuetifyEn } from "vuetify/locale"
import customDe from "./de.json"

export const i18n = createI18n({
  legacy: false,
  locale: "de",
  fallbackLocale: "en",
  messages: {
    de: {
      // we add the vuetify locales to our locale to prevent warnings in the console
      $vuetify: vuetifyDe,
      ...customDe,
    },
    en: {
      // we add the vuetify locales to our locale to prevent warnings in the console
      $vuetify: vuetifyEn,
    },
  },
})

[sniperadmin]

Beautifully done! Great inspiration!

[kkks2024]

const i18nConfig = {
  locale:  uni.getLocale().substring(0, 2),
  messages,
  silentTranslationWarn: true,
  fallbackLocale: 'en',
}

silentTranslationWarn works for me