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

[yooouuri]

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

• Read the Contributing Guidelines.
• Read the README
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.

[plehnen]

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

[luisdeka]

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

#228

[yooouuri]

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

[luisdeka]

Ok sorry @kazupon i have check the code and didnt see that you have already implemented this 84348c1

When i have time i will test it and if i can, i will try to make a PR if i see some problem

[skifgold]

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"

[drewlyton]

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

[minhtien020900]

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

[Erikeine]

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.

[jervalles]

same issue here but it works when I comment/remove all this VueI18nPlugin part:

plugins: [
    ...
    VueI18nPlugin({
      include: [path.resolve(
        dirname(fileURLToPath(import.meta.url)),
        './src/locales/**'
      )],
      runtimeOnly: false,
    }),
  ],

But of course I don't want to remove that.

Using js files cause it's better for spliting

[zenonux]

same issue

[patrikb42222]

jervalles

I'm in a similar situation, I just used JSON files instead of TS and it fixed the problem, but it's not an ideal solution.

[jervalles]

jervalles

I'm in a similar situation, I just used JSON files instead of TS and it fixed the problem, but it's not an ideal solution.

Yea its not, cause we cant put comments on JSON files