Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks done
yooouuri opened this issue May 17, 2023 · 12 comments
Open
4 tasks done

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

yooouuri opened this issue May 17, 2023 · 12 comments
Labels
good first issue Good for newcomers help wanted Extra attention is needed Package: unplugin-vue-i18n Status: PR Welcome Welcome to Pull Request Type: Bug Bug or Bug fixes

Comments

@yooouuri
Copy link

yooouuri commented May 17, 2023

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.
@yooouuri yooouuri added the Status: Review Needed Request for review comments label May 17, 2023
@kazupon kazupon added Package: unplugin-vue-i18n Type: Bug Bug or Bug fixes Status: PR Welcome Welcome to Pull Request and removed Status: Review Needed Request for review comments labels May 26, 2023 — with Volta.net
@kazupon kazupon changed the title TS files are not loaded TS files are not loaded (@intlify/unplugin-vue-i18n/messages) May 26, 2023
@kazupon kazupon added good first issue Good for newcomers help wanted Extra attention is needed labels May 26, 2023 — with Volta.net
@plehnen
Copy link

plehnen commented Jun 12, 2023

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
Copy link

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
Copy link
Author

yooouuri commented Jun 14, 2023

@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
Copy link

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
Copy link

skifgold commented Jun 19, 2023

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
Copy link

drewlyton commented Jul 28, 2023

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

@minhtien020900
Copy link

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
Copy link

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
Copy link

jervalles commented Jul 31, 2024

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
Copy link

zenonux commented Aug 26, 2024

same issue

@patrikb42222
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers help wanted Extra attention is needed Package: unplugin-vue-i18n Status: PR Welcome Welcome to Pull Request Type: Bug Bug or Bug fixes
Projects
None yet
Development

No branches or pull requests