intlify / intlify/bundle-tools

vite build ends up with "[intlify] Not found '...' key in '...' locale messages."

Open
#147 4 comments 0 reactions 0 assignees View on GitHub
status: review needed
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

{{ $t('message') }}

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.