bundle-tools
bundle-tools copied to clipboard
TS files are not loaded (`@intlify/unplugin-vue-i18n/messages`)
Reporting a bug?
main.ts
import messages from '@intlify/unplugin-vue-i18n/messages'
...
const i18n = createI18n({
locale: 'en',
messages
})
console.log(messages) // empty object...
vite.config.ts
VueI18nPlugin({
include: [resolve(__dirname, './src/locales/**')],
})
src/locales/en.ts
export default {
hello: 'World',
}
Expected behavior
It should load the messages from the TS files?
Reproduction
https://github.com/yooouuri/ts-files-unplugin-vue-i18n
$ git clone https://github.com/yooouuri/ts-files-unplugin-vue-i18n
$ pnpm install
$ pnpm dev
Issue Package
unplugin-vue-i18n
System Info
System:
OS: macOS 13.3.1
CPU: (8) arm64 Apple M1 Pro
Memory: 43.05 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
Browsers:
Firefox: 111.0.1
Safari: 16.4
npmPackages:
vite: ^4.3.5 => 4.3.5
vue: ^3.3.2 => 3.3.2
vue-i18n: 9 => 9.2.2
Screenshot
No response
Additional context
No response
Validations
- [X] Read the Contributing Guidelines.
- [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.
I have an issue which might be related. When updating to the latest dependencies, I get the following error when I execute vitest:
Error: Cannot find module ' @intlify/unplugin-vue-i18n/messages'.
It did work before updating vitest from 0.31.3 to 0.32.0
This issue is the same, i have done the proposal of just import .ts and inject to VueI18nPlugin. This will allow to infer message types maybe without the need of create a vue-i18n.d.ts file declaring module with messageKeys
https://github.com/intlify/bundle-tools/issues/228
@kazupon is loading js / ts files supported trough vite (@intlify/unplugin-vue-i18n/messages)? If not, can you point me in the right direction where this should be implemented, so I can make a PR.
Ok sorry @kazupon i have check the code and didnt see that you have already implemented this https://github.com/intlify/bundle-tools/commit/84348c1e95d146283b1ccf6e2ce1b5d3ae8fb0c9
When i have time i will test it and if i can, i will try to make a PR if i see some problem
Also have some similar issue.
If I am trying to include the translation files in .ts format,
path.resolve(__dirname, './src/translation/locales/**.ts'),
I will receive an empty message object from
import messages from '@intlify/unplugin-vue-i18n/messages';
But it still could find a json files, if you make an include option less specific.
Any idea how to configure the VueI18nPlugin
so it could see a .ts
files?
NOTE: I am using "@intlify/unplugin-vue-i18n": "^0.11.0"
👋 Currently running into this same issue - anyone have a solution?
I am using "@intlify/unplugin-vue-i18n": "^0.12.0" and am having the same problem, the documentation by @intlify/unplugin-vue-i18n is really bad
I did some digging to try to figure out my own issue with this as I ran into it myself. Just writing my findings down in case someone else falls down the rabbithole.
From what I can tell currently by using the message compiler (@intlify/unplugin-vue-i18n/messages), it only handles files that has a yaml/json extension. Everything else is skipped.
It is possible to use the plugin with files with other extensions if you import the messages yourself:
import { createI18n } from 'vue-i18n';
import no from './locales/no.json';
import en from './locales/en';
const messages = {
no,
en,
};
const i18n = createI18n({
locale: 'en',
messages,
});
I guess more of a discussion at this point, but what is message-compiler planned to support?
My current problem is that we use identifiers to export localization-data and that doesn't work in the unplugin-versions so upgrading vite seems to be a hassle. The hack appears to be to return a function that returns the identifier (variable), but atleast it doesn't require a rewrite of everything.