bundle-tools icon indicating copy to clipboard operation
bundle-tools copied to clipboard

TS files are not loaded (`@intlify/unplugin-vue-i18n/messages`)

Open yooouuri opened this issue 1 year ago • 12 comments

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.

yooouuri avatar May 17 '23 08:05 yooouuri

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

plehnen avatar Jun 12 '23 15:06 plehnen

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

luisdeka avatar Jun 13 '23 09:06 luisdeka

@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.

yooouuri avatar Jun 14 '23 07:06 yooouuri

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

luisdeka avatar Jun 14 '23 07:06 luisdeka

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"

skifgold avatar Jun 19 '23 11:06 skifgold

👋 Currently running into this same issue - anyone have a solution?

drewlyton avatar Jul 28 '23 17:07 drewlyton

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

minhtien020900 avatar Aug 07 '23 04:08 minhtien020900

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.

Erikeine avatar Aug 19 '23 19:08 Erikeine