intlify / intlify/bundle-tools
vite build ends up with "[intlify] Not found '...' key in '...' locale messages."
- Dominant language
- TypeScript
- Stars
- 270
- Forks
- 46
- PR merge metrics
- No merged PRs in 30d
Description
Setting up vite with vite-plugin-vue-i18n according to the documentation followed by
`npm run dev` and navigating to `localhost:` 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.
```
Both in a "full-scale" application and the minimal example below.
### Expected behavior
Localized message string.
### Reproduction
package.json
```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
```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
```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');
```
App.vue
```vue
export default {}
```
### Issue Package
vite-plugin-vue-i18n
### System Info
```shell
System:
OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
Memory: 11.71 GB / 14.86 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.6.0 - /usr/bin/node
npm: 8.14.0 - /usr/bin/npm
Browsers:
Chromium: 103.0.5060.53
Firefox: 102.0.1
npmPackages:
@intlify/vite-plugin-vue-i18n: ^5.0.0 => 5.0.0
vite: 3.0.0 => 3.0.0
vue: ^3.2.37 => 3.2.37
vue-i18n: ^9.1.10 => 9.1.10
```
### Screenshot
_No response_
### Additional context
_No response_
### Validations
- [X] Read the [Contributing Guidelines](https://github.com/intlify/bundle-tools/blob/main/.github/contributing.md).
- [X] Read the README
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/intlify/bundle-tools/discussions).
Contributor guide
Assessment
This issue has not been assessed yet.