intlify / bundle-tools Goto Github PK

The problem

nuxt-i18n creates an augmented VueI18n instance in this.$root.$i18n and expects vue-i18n to use it as value in _i18n (https://github.com/kazupon/vue-i18n/blob/d28e3b25d9bd9eac51fc3714a4a2940772d85c3d/src/mixin.js#L69)

But when one uses custom i18n blocks in the component with vue-i18n-loader, it fills this.$options.__i18n in the component which is picked up by https://github.com/kazupon/vue-i18n/blob/master/src/mixin.js#L9 and the this.$root.$i18n instance is never set in this._i18n.

The consequence is that this.$i18n in the component is a new basic VueI18n instance and not the nuxt-i18n augmented VueI18n instance. Such attributes as "locales" or "differentDomains" are therefore not accessible from the component and the nuxt-i18n method "switchLocalePath" is broken when using differentDomains with nuxt-i18n.

Here is the link to the comment I posted in the nuxt-i18n project: nuxt-modules/i18n#205 (comment).

Suggested solution

vue-i18n-loader could use an explicit key instead of the cryptic __i18n, like _i18n_translations for instance.
Then vue-i18n would handle the key specifically when present (independently from the different scenarii for setting up this._i18n), as opposed to seed option.i18n with __i18n

What are your thoughts on this?

eg.

My Config

vueI18n({
  include: ['./myProject/submodule/locales/**', './myProject/locales/**']
})

And my locale files could be places here:

├── ./myProject/
│   ├── ./submodule/locales/en.yaml
│   ├── ./locales/en.yaml

Only './myProject/submodule/locales/**' works right now.

Reporting a bug?

I did not set the include config param since I don't use any translation files and just use blocks.

This caused vite-plugin-vue-i18n to parse all json imports as message files. Such that a regular json import threw the error seen below:

file: .../app/src/app_config.json
error during build:
TypeError: Cannot read property 'message' of undefined

Expected behavior

No files should be parsed for messages when include is not specified.

Reproduction

Tell me if needed

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: Linux 5.3 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 7.96 GB / 15.41 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 13.14.0 - /usr/bin/node
    npm: 6.14.4 - /usr/bin/npm
  Browsers:
    Chrome: dev
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^2.4.0 => 2.4.0 
    @intlify/vue-i18n-loader: ^1.0.0 => 1.0.0 
    vite: ^2.4.4 => 2.4.4 
    vue: ^2.6.12 => 2.6.12 
    vue-i18n: ^9.1.7 => 9.1.7

Screenshot

No response

Additional context

[vite-plugin-vue-i18n] Cannot read property 'message' of undefined
file: .../app/src/app_config.json
error during build:
TypeError: Cannot read property 'message' of undefined
    at Object.newOptions.onError (.../app/node_modules/@intlify/bundle-utils/lib/codegen.js:102:48)
    at Object.newOptions.onError (.../app/node_modules/@intlify/bundle-utils/lib/codegen.js:102:36)
    at newOptions.onError (.../app/node_modules/@intlify/bundle-utils/lib/codegen.js:102:36)
    at emitError (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:174:13)
    at readTokenInLinked (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:728:21)
    at readToken (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:742:20)
    at Object.nextToken (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:784:16)
    at parseLinked (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:919:31)
    at parseMessage (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:1018:36)
    at parseResource (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:1057:25)
    at Object.parse (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:1072:21)
    at Object.baseCompile (.../app/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.prod.js:1380:24)
    at Object.generateMessageFunction (.../app/node_modules/@intlify/bundle-utils/lib/codegen.js:105:51)
    at Object.enterNode (.../app/node_modules/@intlify/bundle-utils/lib/json.js:96:61)
    at traverse (.../app/node_modules/jsonc-eslint-parser/lib/parser/traverse.js:45:13)
    at traverse (.../app/node_modules/jsonc-eslint-parser/lib/parser/traverse.js:49:13)

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.

Reporting a bug?

When I use the vite-plugins-vue-i18n plugin, it listens for changes to all the .json files in the project and causes vite to keep reloading

Expected behavior

should only listen to the directory specified by the include parameter

Reproduction

// vite.config.js
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  plugins: [
    vue(), // you need to install `@vitejs/plugin-vue`
    vueI18n({
      // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
      // compositionOnly: false,

      // you need to set i18n resource including paths !
      include: path.resolve(__dirname, './path/to/src/locales/**')
    })
  ]
})

// main.js

// When I import this line of code, the problem arises
import messages from '@intlify/vite-plugin-vue-i18n/messages'

Issue Package

vite-plugin-vue-i18n

System Info

windows 10

Screenshot

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.

Reporting a bug?

In the repository at the link there is an en.yaml file (it looks a bit weird, but that's because I tried to keep it as simple as possible to catch the bug). After performing a yarn build with this en.yaml, the build will not work (see screenshots below).

Note that with this en.yaml the build is broken:

But with this en.yaml (for example) the build is not broken:

Expected behavior

Working build. There should be no errors in the console and this page should appear:

Reproduction

https://github.com/schoonc/intlify--vue-i18n-next--issues--575

1. Clone the repository.
2. $ yarn
3. $ yarn build
4. Open index.html in browser.
5. See the console.

System Info

System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (8) x64 AMD Ryzen 5 3550H with Radeon Vega Mobile Gfx
    Memory: 4.73 GB / 15.50 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 14.17.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.18.1 - /usr/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 89.0.2
  npmPackages:
    vue: ^3.0.0 => 3.1.4 
    vue-i18n: 9.1.7 => 9.1.7

Screenshot

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• 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

I add eslintPlugin() in vite.config.js as following:

export default defineConfig({
	plugins: [
		vue(),
		eslintPlugin({
			fix: true,
			exclude: path.resolve(__dirname, './src/main.js'), // still throw the error even I excluded main.js from here
		}),
		vueI18n({
			include: path.resolve(__dirname, './src/i18n/**'),
		}),
	],
});

and it throws an error:

[vite] Internal server error: No files matching '@intlify/vite-plugin-vue-i18n/messages' were found.
Plugin: vite:eslint
File: @intlify/vite-plugin-vue-i18n/messages

Here's my main.js:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import messages from '@intlify/vite-plugin-vue-i18n/messages';
import App from './App.vue';

const i18n = createI18n({
	messages,
});

createApp(App).use(i18n).mount('#app');

Note: Removing eslintPlugin() from vite.config.js would get rid of the error, but I do want to keep EsLint functionality though...

I'm not sure this is caused by vite-plugin-eslint or vite-plugin-vue-i18n. Let me know if I should turn it to vite-plugin-eslint instead.

Versions:

• vite: ^2.3.3
• vite-plugin-vue-i18n: ^2.1.2
• vite-plugin-eslint: ^1.1.0
• eslint: ^7.27.0

Reporting a bug?

When trying to install @intlify/vite-plugin-vue-i18n in a project with the latest release of the Vue3 compatible build of vue-i18n, an error is thrown.

npm install @intlify/vite-plugin-vue-i18n -D
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @intlify/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue-i18n
npm ERR!   dev vue-i18n@"^9.2.0-beta.30" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional vue-i18n@"^9.0.0" from @intlify/[email protected]
npm ERR! node_modules/@intlify/vite-plugin-vue-i18n
npm ERR!   dev @intlify/vite-plugin-vue-i18n@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue-i18n
npm ERR!   peerOptional vue-i18n@"^9.0.0" from @intlify/[email protected]
npm ERR!   node_modules/@intlify/vite-plugin-vue-i18n
npm ERR!     dev @intlify/vite-plugin-vue-i18n@"*" from the root project

You can force the installation using the --force flag. However, I wouldn't expect that to be necessary and thus consider this to be an issue.

Expected behavior

The vue-i18n docs specifically refer to using the vue-i18n build (v9) provided under the intlify domain for Vue3 compatibility.
The docs for this version of vue-i18n mention installing the package using npm i vue-i18n@next, and those same docs reference @intlify/vite-plugin-vue-i18n for bundling. I would expect both to be compatible.

Reproduction

Create a new project and install vue-i18n@next followed by @intlify/vite-plugin-vue-i18n.

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 813.90 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    npm: 7.24.0 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Chrome: 97.0.4692.99
    Edge: 97.0.1072.76
    Firefox: 96.0.2
    Safari: 15.0
  npmPackages:
    vite: ^2.7.13 => 2.7.13
    vue: ^3.2.27 => 3.2.29
    vue-i18n: ^9.2.0-beta.30 => 9.2.0-beta.30

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.

Clear and concise description of the problem

We are maintaining plugins/loaders for the following bundlers at this repo.

• vite: @intlify/vite-puglin-vue-i18n
• webpack: @intlify/vue-i18n-loader
• rollup: @intlify/rollup-plugin-vue-i18n

The implementation of these plugins is almost identical. And every time a feature is added to each one we have to implement and release it.
We have maintenance costs.

Suggested solution

We should maintain with using unplugin
This is dealt with all of the bundlers we offer.

• unplugin
  https://github.com/unjs/unplugin

Alternative

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.

Reporting a bug?

Hi guys,

I have been using custom blocks in sfc for a while.

I migrated from Vue 2 to 3 and Vue i18n from v8 to 9. I used vue cli and vue i18n loader for the custom block. Since the migration, i now use vue 3 + Vue i18n v9 + vite vite-plugin-vue-i18n.

I want to use the legacy api for i18n to minimize the page migration work. However, $t only picks up the global resources loaded from vite.config and my i18n setting below

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
      compositionOnly: false,
      include: resolve(__dirname, "./src/locales/**"),
    }),
  ],
});

import { createI18n } from "vue-i18n";
import messages from "@intlify/vite-plugin-vue-i18n/messages";

const i18n = createI18n({
  legacy: true, // you must set `false`, to use Composition API
  locale: 'en-US',
  fallbackLocale: 'en-US',
  messages,
});

The custom block doesnt seem to be loaded into the instance for some reason.

Is it a bug or not supported or I missed something?

Expected behavior

custom block messages should be loaded

Reproduction

see description above

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: Windows 10 10.0.22598
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 10.05 GB / 31.71 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22598.200.0), Chromium (101.0.1210.39)
    Internet Explorer: 11.0.22598.1

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.

Reporting a bug?

I use vue-i18n v9 in a vite project and hot module reloading is not working: the page refreshes every time.
I followed the documentation for hot module reloading for the v8, and changed the variable name to import.meta.hot as per vite documentation.

Expected behavior

The translation should be updated without refreshing the page.

Reproduction

I created this repository to reproduce the issue: https://github.com/clement-escolano/vue-i18n-hmr-vite.
The first commit is a basic vite project generated with vue-ts template. The second commit updates vue to the latest version, install vue-i18n to the latest version and try to set up HMR.
Once the repository is cloned and dependencies installed, you should run npm run dev, click on the counter button in the web page (http://localhost:3000), then update the translation in src/locales/en.json then see that the counter button is reset and the translation updated.

System Info

Vue: 3.2.4
vue-i18n: 9.2.0-beta.3

Screenshot

No response

Additional context

I read the other issues about HMR not working but did not manage to apply to my case. Some issues mention version 9.2.0 should fix it but as described here, I used version 9.2.0 in beta and it is still the case.

Validations

• Read the Contributing Guidelines
• Read the Documentation
• 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

Reporting a bug?
If I set the legacy: false and globalInjection: true in createI18n, the local defined messages with i18n tag in SFC(Single File Component) makes $t with it returns key and occurs warning.

Module versions (please complete the following information):

• @vue/cli: 4.5.12
• vue-i18n: 9.1.4
• vue-cli-plugin-i18n: 2.1.0
• vue: 3.0.5

To Reproduce

1. Set legacy: false as below

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'ja',
  fallbackLocale: 'ja',
  fallbackWarn: false,
  messages: {
    ja
  }
})

app.use(i18n)

2. Create local i18n with i18n tag in SFC
3. Use $t in the template
4. See the warning that says there is no key in locale that defined in i18n tag.

Expected behavior
$t returns translated string as expected

TOML is a more straitforward format than JSON or YAML, especially it would be much more intuitive for translators without a tech background. So imagine the i18n translation area could be something like this:

[zh]
"homepage" = "主页"
[zh.about]
"contact" = "联系我们"
   "{n} times"="{n} 次" # There's no space between `=`, has leading spaces and it costs no problem
[en]
"homepage" = "Homepage" # comment
[en.about]
"contact" = "Contact Us"
"multiline string" = """are surrounded by three quotation marks
on each side and allow newlines."""

Which equals to the following in JSON:

{
  "zh": {
    "homepage": "主页",
    "about": {
      "contact": "联系我们",
      "{n} times": "{n} 次"
    }
  },
  "en": {
    "homepage": "Homepage", // comment only available with JSON5
    "about": {
      "contact": "Contact Us",
      "multiline string": "are surrounded by three quotation marks\non each side and allow newlines."
    }
  }
}

YAML version:

zh:
  homepage: 主页
  about:
    contact: 联系我们
en:
  homepage: Homepage #comment
  about:
    contact: Contact Us
    "{n times}": {n} times # inconsistent quote is needed here
    multiline string: "are surrounded by three quotation marks\non each side and allow newlines."

I think the TOML version is more readable. JSON is too strict and verbose, and YAML is highly reliant on indention which could be more prone to errors. Also it creates inconsistency dealing with quotes. TOML is not indentation sensitive, so you won't mess things up by adding more or less space between the strings. It has comment feature, it's consistent and can do pretty much anything that JSON and YAML can do.
It would be nice if this module could also support TOML

According to manual, I've set up webpack as

  rules: [
    {
      test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
      type: "javascript/auto",
      loader: "@intlify/vue-i18n-loader",
      include: [
        // Use `Rule.include` to specify the files of locale messages to be pre-compiled
        path.resolve(__dirname, "./src/locale")
      ]
    }
  ]

and json files are loaded just fine, but attempt to load yaml yields

TS2307: Cannot find module './locale/en.yaml' or its corresponding type declarations.

Of course I can stick with json or even js for locales, buy yaml is just much simpler to write...

Reporting a bug?

If I use a JSON like

{
  "bug": "@s are not working"
}

the following error appears

Uncaught Error: Module build failed: Error: Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String

Expected behavior

Printing @s are not working

Reproduction

Use a JSON like

{
  "bug": "@s are not working"
}

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 7.20.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Chromium: 94.0.4606.81
    Firefox: 93.0
  npmPackages:
    vue: ^3.0.0 => 3.2.20 
    vue-i18n: ^9.1.0 => 9.1.9

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• 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

The following command causes the error below: npm i --save-dev @intlify/vue-i18n-loader

npm i --save-dev @intlify/vue-i18n-loader
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.0" from @intlify/[email protected]
npm ERR! node_modules/@intlify/vue-i18n-loader
npm ERR!   dev @intlify/vue-i18n-loader@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/novit-admin/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/novit-admin/.npm/_logs/2021-06-10T11_30_45_412Z-debug.log

Below is the full error report:

# npm resolution error report

2021-06-10T11:30:45.408Z

While resolving: [email protected]
Found: [email protected]
node_modules/vue
  vue@"^2.6.11" from the root project

Could not resolve dependency:
peer vue@"^3.0.0" from @intlify/[email protected]
node_modules/@intlify/vue-i18n-loader
  dev @intlify/vue-i18n-loader@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "vue",
    "version": "2.6.14",
    "whileInstalling": {
      "name": "vue-i18n-demo",
      "version": "0.1.0",
      "path": "/home/novit-admin/vue-i18n-demo"
    },
    "location": "node_modules/vue",
    "dependents": [
      {
        "type": "prod",
        "name": "vue",
        "spec": "^2.6.11",
        "from": {
          "location": "/home/novit-admin/vue-i18n-demo"
        }
      }
    ]
  },
  "edge": {
    "type": "peer",
    "name": "vue",
    "spec": "^3.0.0",
    "error": "INVALID",
    "from": {
      "name": "@intlify/vue-i18n-loader",
      "version": "2.1.0",
      "whileInstalling": {
        "name": "vue-i18n-demo",
        "version": "0.1.0",
        "path": "/home/novit-admin/vue-i18n-demo"
      },
      "location": "node_modules/@intlify/vue-i18n-loader",
      "dependents": [
        {
          "type": "dev",
          "name": "@intlify/vue-i18n-loader",
          "spec": "*",
          "from": {
            "location": "/home/novit-admin/vue-i18n-demo"
          }
        }
      ]
    }
  },
  "peerConflict": null,
  "strictPeerDeps": false,
  "force": false
}

Thanks

Hello here,

Is it possible to use tag to host the date translation?

If so, how does it work ?
because I tried in my project, and $d doestn't seems to find my variables defintions.

Regards,
Antoine

As a developer, I need to be able to load Translation JSON from another route or sub domain.

Reporting a bug?

this is my hi-in.json content, when I include the translation of the two keys AA_Alert_UsernameNotExist and AA_Alert_ValidationCode, it will cause a build error

{
  "Next": "अगला",
  "vcode": "प्रमाणीकरण कोड",
  "AA_Alert_UsernameNotExist": "दिया गया लॉग इन नाम हमारे सिस्टम में मौजूद नहीं है| कृपया एक मान्य लॉग इन नाम लिखें|",
  "AA_Alert_ValidationCode": "दिया गया सत्यापन कोड गलत है| कृपया एक सही सत्यापन कोड लिखें|"
}

[vite-plugin-vue-i18n] Cannot read properties of undefined (reading 'message')
file: D:/git-repo/components/src/pages/accountAssistance/locales/app.hi-in.json
TypeError: Cannot read properties of undefined (reading 'message')
    at Object.newOptions.onError (D:\git-repo\components\node_modules\@intlify\bundle-utils\lib\codegen.js:102:48)
    at Object.newOptions.onError (D:\git-repo\components\node_modules\@intlify\bundle-utils\lib\codegen.js:102:36)
    at newOptions.onError (D:\git-repo\components\node_modules\@intlify\bundle-utils\lib\codegen.js:102:36)
    at emitError (D:\git-repo\components\node_modules\@intlify\bundle-utils\node_modules\@intlify\message-compiler\dist\message-compiler.cjs.prod.js:822:13)    
    at parsePlural (D:\git-repo\components\node_modules\@intlify\bundle-utils\node_modules\@intlify\message-compiler\dist\message-compiler.cjs.prod.js:1044:13) 
    at parseResource (D:\git-repo\components\node_modules\@intlify\bundle-utils\node_modules\@intlify\message-compiler\dist\message-compiler.cjs.prod.js:1057:20)
    at Object.parse (D:\git-repo\components\node_modules\@intlify\bundle-utils\node_modules\@intlify\message-compiler\dist\message-compiler.cjs.prod.js:1067:21)
    at Object.baseCompile (D:\git-repo\componentss\node_modules\@intlify\bundle-utils\node_modules\@intlify\message-compiler\dist\message-compiler.cjs.prod.js:1375:24)
    at Object.generateMessageFunction (D:\git-repo\components\node_modules\@intlify\bundle-utils\lib\codegen.js:105:51)
    at Object.enterNode (D:\git-repo\components\node_modules\@intlify\bundle-utils\lib\json.js:104:61)

Expected behavior

build successfully

Reproduction

add these translations and build

  "AA_Alert_UsernameNotExist": "दिया गया लॉग इन नाम हमारे सिस्टम में मौजूद नहीं है| कृपया एक मान्य लॉग इन नाम लिखें|",
  "AA_Alert_ValidationCode": "दिया गया सत्यापन कोड गलत है| कृपया एक सही सत्यापन कोड लिखें|"

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 5.54 GB / 31.75 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.2 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (98.0.1108.62)
    Internet Explorer: 11.0.22000.120
 npmPackages:
    @intlify/vite-plugin-vue-i18n: ^3.4.0 => 3.4.0 
    vite: ^2.9.6 => 2.9.6 
    vue: ^3.2.31 => 3.2.31 
    vue-i18n: ^9.2.0-beta.35 => 9.2.0-beta.35

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.

hi there, I want to publish my vue3+vite package to npm but after publishing, I encountered "Uncaught TypeError: _ctx.$t is not a function" in a test project and my package is not working, any suggestions... ?

PS: I'm using options api

here is my vite.configs.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

// https://vitejs.dev/config/
const path = require("path")
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/install.ts'),
      name: 'vcp',
      fileName: (format) => `vcp.${format}.ts`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        exports: 'named',
        globals: {
          vue: 'Vue',
          vcp: 'Vcp'
        }
      }
    },
  },
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, 'src/assets/translations.ts'),
      compositionOnly: false,
    })
  ],
  server: {
    port: 8080
  },
  resolve: {
    dedupe: ['vue'],
    alias: {
      "~": path.resolve(__dirname, "./src"),
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Originally posted by @alireza0sfr in #122

Reporting a bug?

I got a weird behaviour when i add sometime a sub node into my json related to the languages.
The weirdest thing is that when i'm working in dev it's ok , this error only append with the build version.

In the screenshot below, if i remove the node "p" with ( v and z inside ) the error disapear.

Module versions (please complete the following information):

• @intlify/vue-i18n-loader: 2.0.3
• vue-i18n: 9.0.0
• vue: ^3.0.11

Screenshots

End my structure.

Generated code with build

The "undefinediundefined" line is created into the build code.

If i remove the node "p" in my json i got this in source code

So in the line before $e.render = Me , undefinedundefined is not existing.

By the way thanks for your great work.

Comment.

It's seems that if i put my json file content into "https://jsonformatter.curiousconcept.com/" online tool and after i get the formatted result and i paste it into my json file it's working perfectly. Could be problem of indentation ?

Reporting a bug?

Getting this error:

 [vite] Internal server error: Unexpected token '<'.
  Plugin: vite-plugin-vue-i18

only in files which have html in the values (ie: {"en-GB":{"description":"<p><em>This</em> shows...</p>"}}). All other files work just fine.

Expected behavior

As with webpack, that html tags inside of language json files would work.

Reproduction

import any json file using the i18n template block like so:

<i18n src="../i18n-compiled/myfile.json"></i18n>

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 3.02 GB / 40.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.13.2 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Chrome: 103.0.5060.53
    Firefox: 101.0.1
    Safari: 15.5
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^3.3.1 => 3.4.0
    vue: ^3.0.0 => 3.2.37
    vue-i18n: ^9.0.0 => 9.1.10

Screenshot

No response

Additional context

#131

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.

Clear and concise description of the problem

• for some projects custom block code is not the right way
• if we want place locale files in separate directory, we need to use "global" access, so everything is in one file per locale,
  example (these files can really grow in size and be really unclear):

locales/en.yaml
locales/fr.yaml

• if we split locale translation files into multiple files, import all locales at once is not working, because its not correctly merged

Suggested solution

• add possibility to split each locale to multiple files, so our structure can look like this:

locales/en/group1/subject1.yaml
locales/en/group1/subject2.yaml
locales/en/group2/subject3.yaml

locales/fr/group1/subject1.yaml
locales/fr/group1/subject2.yaml
locales/fr/group2/subject3.yaml

There are to possibilities how to achieve this:

1. more complex way - first directory will define the locale and each directory is a subject path, so if locales/en/group1/subject1.yaml content is this:

foo: foo
bar:
  baz: baz

the "generated" file for en locale will be:

group1:
  subject1:
    foo: foo
    bar:
      baz: baz

2. more simple way - just merge the content, use root subject as locale - we will need to define whole subject in each file, the plugin will just merge everything in one
   locales/en/group1/subject1.yaml

en:
  group1:
    subject1:
      foo: foo
      bar:
        baz: baz

locales/fr/group1/subject1.yaml

fr:
  group1:
    subject1:
      foo: foo
      bar:
        baz: baz

Alternative

If there is any existing way how to achieve similar code spliting right now without need to implement it, please add it to documentation, because now there is nothing about it.

Additional context

I tried several ways how to structure the dirs, files and content of yaml/json files and nothing was correctly merged, always only one file worked and other were ignored.

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.

Reporting a bug?

Whenever vue-i18n via vue-i18n-loader fails to process a translation value with a special character or a syntax error, vue-i18n-loader reports the following generic error message:

Syntax Error: Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String

This happens when the translation value contains special characters (see https://vue-i18n.intlify.dev/guide/essentials/syntax.html#special-characters) or syntax errors (e.g. An extra closing curly brace after a {placeholder}}.).

Expected behavior

The error should at least report where in the file and ideally for which translation key the issue occurs. Currently, only the file is reported like so:

 error  in ./src/locales/es-ES.json

Syntax Error: Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String


 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
[stack trace omitted because it only includes internal files]

Reproduction

This can be reproduced with any vue-i18n-loader-based setup and a translation file like this:

{
  "An extra closing curly brace after a {placeholder}}.": "An extra closing curly brace after a {placeholder}}."
}

Issue Package

vue-i18n-loader

System Info

Binaries:
    Node: 16.15.0 - /usr/bin/node
    Yarn: 1.22.18 - ~/.npm-global/bin/yarn
    npm: 8.8.0 - ~/.npm-global/bin/npm
  npmPackages:
    @intlify/vue-i18n-loader: ^5.0.0 => 5.0.0 
    vue: ^3.2.33 => 3.2.33 
    vue-i18n: ^9.1.9 => 9.1.9

Screenshot

No response

Additional context

I’m reporting this as a bug because it makes migrating a large code base with many translations near impossible. I have to binary-search through translation files to identify which key it vue-i18n is stumbling over.

More examples (each of them will cause a failure):

{
  "Contact [email protected]": "Contact [email protected]",
  "Placeholder {with space}": "Placeholder {with space}",
  "Placeholder with accent: {cafe}": "Placeholder with accent: {café}",
  "An extra closing curly brace after a {placeholder}}.": "An extra closing curly brace after a {placeholder}}."
}

Corrected version:

{
  "Contact [email protected]": "Contact info{'@'}example.org",
  "Placeholder {withSpace}": "Placeholder {withSpace}",
  "Placeholder with accent: {cafe}": "Placeholder with accent: {cafe}",
  "An extra closing curly brace after a {placeholder}.": "An extra closing curly brace after a {placeholder}."
}

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.

Clear and concise description of the problem

For the vue-i18n-loader, we need the below options:

• defaultSFCLang spec: https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#defaultsfclang
• globalSFCScope spec: https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#globalsfcscope

Suggested solution

Let try to port from vite-plugin-vue-i18n.

Alternative

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.

Reporting a bug?

Hi, I stumbled upon a weird problem. I have localizations that contain HTML tags and it worked fine while the text was specified inside of <i18n> SFC tag, but later I started switching to <i18n src="path/to/file.yaml> style for easier translation handling and the plugin now doesn't generate the locales. And I narrowed down the cause to whether or not the file has anything resembling an HTML tag e.g. text <string> text

Expected behavior

It shouldn't fail

Reproduction

This works fine:

<i18n lang="yaml">
en:
  test: message <span>test</span> text
</i18n>

While this fails:

<i18n lang="yaml" src="file.yaml"></i18n>

file.yaml:

en:
  test: message <span>test</span> text

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 1.30 GB / 7.82 GB
  Binaries:
    Node: 16.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.15.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 102.0.5005.63
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^4.0.0 => 4.0.0
    vite: ^2.9.9 => 2.9.9
    vue: ^3.2.25 => 3.2.36
    vue-i18n: 9@beta => 9.2.0-beta.35

Screenshot

No response

Additional context

This issue can be currently avoided by using literal interpolation: {'<'} and {'>'}

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.

Module versions (please complete the following information):

• webpack: 5.40
• vue-loader: 16.2.0
• @intlify/vue-i18n-loader: 2.1.0
• vue-i18n: 9.1.6
• vue: 3.1.1

Reproduction Link
https://github.com/IlCallo/vue-i18n-json5-repro

Important files are:

• quasar.conf.js for webpack configuration
• src/boot/i18n.ts which initialise vue-i18n
• src/i18n/en-US.json5
• src/i18n/index.ts

To Reproduce
Steps to reproduce the behavior:

If using the repro:

1. download the repro
2. yarn install
3. quasar dev or quasar build

Setup on your own:

1. Install latest json5 version (yarn add -D json5)
2. Make webpack able to parse it adding the corresponding rule

         const json5 = require('json5');

         webpackConf.module.rules.push({
          test: /\.json5$/,
          type: 'json',
          parser: {
            parse: json5.parse
          }
        });

3. Install the loader (yarn add -D @intlify/vue-i18n-loader) and apply it as specified into the docs

         const { resolve } = require('path');

         webpackConf.resolve.alias['vue-i18n$'] =
          'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js';

         webpackConf.module.rules.push({
          test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
          type: 'javascript/auto',
          loader: '@intlify/vue-i18n-loader',
          include: [
            // Use `Rule.include` to specify the files of locale messages to be pre-compiled
            resolve(__dirname, 'src/i18n')
          ]
        });

4. Create a JSON5 file such as src/i18n/en-US.json5 and reference its content into vue-i18n
5. Start the compilation

Expected behavior
It should work without errors

Additional context
The generated error

 App •  ERROR  •  UI  in ./src/i18n/en-US.json5

Error: Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String
  
  - NormalModule.js:717 processResult
    [omatic]/[webpack]/lib/NormalModule.js:717:17
  
  - NormalModule.js:807 
    [omatic]/[webpack]/lib/NormalModule.js:807:5
  
  - LoaderRunner.js:406 
    [omatic]/[loader-runner]/lib/LoaderRunner.js:406:3
  
  - LoaderRunner.js:232 iterateNormalLoaders
    [omatic]/[loader-runner]/lib/LoaderRunner.js:232:10
  
  - LoaderRunner.js:239 iterateNormalLoaders
    [omatic]/[loader-runner]/lib/LoaderRunner.js:239:10
  
  - LoaderRunner.js:254 
    [omatic]/[loader-runner]/lib/LoaderRunner.js:254:3
  
  - LoaderRunner.js:137 runSyncOrAsync
    [omatic]/[loader-runner]/lib/LoaderRunner.js:137:12
  
  - LoaderRunner.js:250 iterateNormalLoaders
    [omatic]/[loader-runner]/lib/LoaderRunner.js:250:2
  
  - LoaderRunner.js:223 Array.<anonymous>
    [omatic]/[loader-runner]/lib/LoaderRunner.js:223:4
  
  - CachedInputFileSystem.js:27 runCallbacks
    [omatic]/[webpack]/[enhanced-resolve]/lib/CachedInputFileSystem.js:27:15

Reporting a bug?

In case of Options API vue-i18n-loader parses the <i18n></i18n> section and generates code that puts the result into component object itself. It works for Options API + JS, but breaks when using vue-class-component because in that case component options are not the component object itself, but it's "__o" property.

Expected behavior

Code generated by vue-i18n-loader checks if __o prop exists on the component object and puts translations into it if it does.

Reproduction

https://github.com/SniperJoe/vue-i18n-loader-repro

Issue Package

vue-i18n-loader

System Info

System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (16) x64 AMD Ryzen 7 3800X 8-Core Processor
    Memory: 2.01 GB / 31.35 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 12.21.0 - /usr/bin/node
    npm: 8.3.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Firefox: 92.0
  npmPackages:
    @intlify/vue-i18n-loader: ^3.2.0 => 3.3.0 
    vue: ^3.2.0 => 3.2.21 
    vue-i18n: ^9.2.0-beta.11 => 9.2.0-beta.17 
    webpack: ^5.44.0 => 5.62.1

Screenshot

No response

Additional context

The workaround I use is to edit bundle-utils/lib/json.js:

<..>
                        generator.push(`${exportSyntax} function (Component) {`);
                        generator.indent();
                        generator.pushline(`const newI18N = (${componentNamespace}__o ? ${componentNamespace}__o.${variableName} : ${componentNamespace}${variableName}) || []`);
                        generator.pushline(`${componentNamespace}${variableName} = ${componentNamespace}${variableName} || []`);
                        generator.push(`newI18N.push({`);
                        generator.indent();
                        generator.pushline(`"locale": ${JSON.stringify(localeName)},`);
                        generator.push(`"resource": `);
<..>
                        generator.push(`if (${componentNamespace}__o) {`);
                        generator.indent();
                        generator.push(`${componentNamespace}__o.${variableName} = newI18N;`);
                        generator.deindent();
                        generator.push(`} else {`);
                        generator.indent();
                        generator.push(`${componentNamespace}${variableName} = newI18N;`);
                        generator.deindent();
                        generator.push(`}`);

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.

Hi, I got this error Uncaught SyntaxError: The requested module '/node_modules/.vite/vue-i18n.js?v=2c415b54' does not provide an export named 'useI18n' in my browser console when I am integrating i18n with Vite. I am using Vite 2.3.8 and @intlify/vite-plugin-vue-i18n 2.3.0. Below are my files:

./vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './src/locales/**')
    })
  ]
})

./src/main.js:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-icons/font/bootstrap-icons.css'

const i18n = createI18n({
    locale: [
        'en',
        'zh',
    ]
})

createApp(App).use(i18n).mount('#app')

./src/App.vue:

<template>
  <!-- -->
  <div> {{ t("hello") }}
</template>

<script>
export default {
  name: 'App',
  // ...
};
</script>

<script setup>
import CourseMapView from './components/CourseMapView.vue';
import CourseMapEdit from './components/CourseMapEdit.vue';

import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n({
  locale: 'en'
});
</script>

<style>
</style>

./src/locales/en.yaml:

hello: "Hello, World!"

How can I solve this problem? Thanks!

Reporting a bug?

I'm trying unplugin-vue-i18n + vue-i18n v8 + vue-i18n-bridge, with option.bridge=true in vite plugin.
The plugin transforms the custom block to cjs which results into error:

SyntaxError: The requested module '/src/App.vue?vue&type=i18n&index=1&lang.json' does not provide an export named 'default'

Expected behavior

Custom block should be loaded without syntax error. And a string "value" instead of "key" should be shown in html.

Reproduction

https://stackblitz.com/edit/vitejs-vite-5xlvex

Issue Package

unplugin-vue-i18n

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @intlify/unplugin-vue-i18n: ^0.3.0 => 0.3.0 
    vite: ^2.9.13 => 2.9.13 
    vue: ~2.6.14 => 2.6.14 
    vue-i18n: ^8.27.2 => 8.27.2

Screenshot

vite-plugin-inspect:

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.

Reporting a bug?

After upgrading yaml-loader from v0.6.0 to v0.8.0 I got this build error on .yml files: "Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String"

Expected behavior

Build with no errors :)

Reproduction

System Info

package.json:

"dependencies": {
    "@quasar/quasar-ui-qcalendar": "^3.4.1",
    "axios": "^0.25.0",
    "core-js": "^3.22.8",
    "lodash": "^4.17.21",
    "mitt": "^3.0.0",
    "pinia": "^2.0.14",
    "quasar": "^2.7.1",
    "quasar-extras": "^2.0.9",
    "vue": "^3.2.36",
    "vue-i18n": "^9.1.10",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.18.2",
    "@babel/plugin-proposal-class-properties": "^7.17.12",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12",
    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
    "@babel/plugin-proposal-private-methods": "^7.17.12",
    "@intlify/vue-i18n-loader": "^4.2.0",
    "@vue/cli-plugin-babel": "^5.0.4",
    "@vue/cli-plugin-eslint": "^5.0.4",
    "@vue/cli-service": "^5.0.4",
    "@vue/compiler-sfc": "^3.2.36",
    "circular-dependency-plugin": "^5.2.2",
    "dotenv": "^14.3.2",
    "dotenv-expand": "^6.0.1",
    "eslint": "^8.16.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-vue": "^9.1.0",
    "glob-all": "^3.3.0",
    "purgecss-webpack-plugin": "^4.1.3",
    "raw-loader": "^4.0.2",
    "sass": "^1.52.1",
    "sass-loader": "^10.2.1",
    "webpack-bundle-analyzer": "^4.5.0",
    "yaml-loader": "^0.8.0"
  }

Screenshot

i18n webpack config

g

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• 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
• The provided reproduction is a minimal reproducible example of the bug.

Hey, there is a way to make this in one loop? (loop over $i18n.locales)

Reporting a bug?

Using Vue 3, Vue I18n v9, and vue-i18n-loader v4.1.0, I'm not able to build a particular component that uses an i18n custom block. Looking at the messages in the block, I think I have tracked down the issue to a specific case: an array where one element of the array is itself an array, but the next element is not an array. For example, when I try to build a component with the following i18n custom block, I see an error message:

<i18n>
{
  "en": {
    "foo": [
      [
        "bar"
      ],
      "baz"
    ]
  }
}
</i18n>

However, I am able to build a component with the following i18n custom block:

<i18n>
{
  "en": {
    "foo": [
      [
        "bar"
      ],
      [
        "baz"
      ]
    ]
  }
}
</i18n>

The error message I see is:

Module parse failed: Unexpected token (10:17)
File was processed with these loaders:
 * ./node_modules/@intlify/vue-i18n-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
|           [
|             (ctx) => {const { normalize: _normalize } = ctx;return _normalize(["bar"])}
>           ](ctx) => {const { normalize: _normalize } = ctx;return _normalize(["baz"])},
|
|         ]

Looking at ](ctx), it looks like a comma is missing between ] and (ctx).

Expected behavior

I am migrating a project from Vue 2 to Vue 3, and I was previously able to build this component. It would be great not to have to change the structure of the messages, because the translation platform we use would register that as completely new translations.

Reproduction

Please let me know if any information would be helpful in addition to the i18n custom block above.

Issue Package

vue-i18n-loader

System Info

System:
  OS: macOS 10.15.7
Binaries:
  Node: 14.17.6 - /usr/local/bin/node
  npm: 6.14.15 - /usr/local/bin/npm
npmPackages:
  @intlify/vue-i18n-loader: ~4 => 4.1.0
  vue: ~3 => 3.2.26
  vue-i18n: ~9 => 9.1.9

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.

After adding vue add i18n to project and running locally its working fine but when I uploaded build to server I am getting Refused to evaluate a string as JavaScript because 'unsafe-eval' error.

Version:
Vue:3
Vue-i18n:^9.1.0

here is i18n.js file

`import { createI18n } from 'vue-i18n';
import en from "./locales/en.json";
import de from "./locales/de.json";

/**

• Load locale messages
• The loaded JSON locale messages is pre-compiled by @intlify/vue-i18n-loader, which is integrated into vue-cli-plugin-i18n.
• See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
  */

export default createI18n({
legacy: false,
globalInjection: true,
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'de',
messages: {
en: en,
de: de
}
});
`

Vue config file
pluginOptions: { i18n: { locale: 'en', fallbackLocale: 'de', localeDir: 'locales', enableLegacy: false, runtimeOnly: false, compositionOnly: false, fullInstall: true } }

We are missing a source map with @intlify/[email protected] on dev mode

Console Error

DevTools failed to load source map: Could not load content for http://localhost:3000/@vite/client.mjs.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Steps to reproduce

1. Create a new project with npm init vite@latest my-vue-app -- --template vue
2. Install vue-i18n with npm i @intlify/vite-plugin-vue-i18n vue-i18n
3. Add i18n plugin to vite.config.js
4. Run dev mode npm run dev to inspect

package.json

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@intlify/vite-plugin-vue-i18n": "^3.2.1",
    "vue": "^3.2.25",
    "vue-i18n": "^9.1.9"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.1",
    "vite": "^2.7.12"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import i18n from '@intlify/vite-plugin-vue-i18n'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), i18n()],
})

Environment

macOS 12.1
Node 14.18.2
npm 8.3.1
Chrome 97
Safari 15.2

I can see the inlined source map for http://localhost:3000/@vite/client when I don't have installed the plugin, that's why I suspect that it's related.

I don't know how I can help to fix it, I hope somebody can address me.

Originally posted by @fcomrqz in #1 (comment)

Sorry

Clear and concise description of the problem

Currently attempted to use the Vite loader with vue-ssr results in an error:

[vite] Internal server error: Cannot find module '@intlify/vite-plugin-vue-i18n/messages' imported from 'x'

Suggested solution

I'm not sure what the issue is (I've no idea how the virtual import stuff from Vite works)

Alternative

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.

vue & vue-i18n version

ex: 2.6.6, 8.0.0
yaml-loader: 0.5.0
cson-loader: 0.1.0

Reproduction Link

my repository: https://bitbucket.org/new_novel/herbalist-web/src/default/
(see commits 2 and 3)

Steps to reproduce

• go to my repository: https://bitbucket.org/new_novel/herbalist-web/src/default/, see two commits:
  • "freeze(i18n): yaml-loader works well for main-menu.vue"
  • "freeze(i18n): cson-loader doesn't work for main-menu.vue"
• clone repository
• update to first commit of 2 specified: hg update 2
• run UI (npm run serve), see 'main-menu.vue', check in browser that all works
• update to second commit of 2 specified: hg update 3
• see 'main-menu.vue', run UI (npm run serve), see error:

SyntaxError: Unexpected token m in JSON at position 0
    at JSON.parse (<anonymous>:null:null)

What is Expected?

CSON was parsed just like YAML.

What is actually happening?

Cson isn't loaded from tag, I receive error:

 ERROR  Failed to compile with 1 errors                                                                                                                       7:18:37 PM

 error  in ./src/components/main-menu.vue?vue&type=custom&index=0&blockType=i18n

Syntax Error: SyntaxError: Unexpected token m in JSON at position 0
    at JSON.parse (<anonymous>:null:null)

 @ ./src/components/main-menu.vue?vue&type=custom&index=0&blockType=i18n 1:0-299 1:315-318 1:320-616 1:320-616
 @ ./src/components/main-menu.vue
 @ ./node_modules/babel-loader/lib!./node_modules/coffee-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=coffee&
 @ ./src/App.vue?vue&type=script&lang=coffee&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.108:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Reporting a bug?

Just updated from webpack to vite (laravel 9.19).

Added to package.json:
"@intlify/vite-plugin-vue-i18n": "^3.4.0",

Added to vite.config.js:

vueI18n({

})

Now getting the error:
Uncaught SyntaxError: invalid assignment left-hand side

@intlify_vite-plugin-vue-i18n.js:102530:8

var createContext = (ctx2) => {
  ctx2 = Object.assign({
    cwd: process.cwd(),
    env: "development"
  }, ctx2);
  if (!ctx2.env) {
    "development" = "development"; <----- THIS LINE
  }
  return ctx2;
};

Expected behavior

Build with no errors

Reproduction

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.10.0",
        "@inertiajs/inertia-vue3": "^0.5.1",
        "@inertiajs/progress": "^0.2.6",
        "@intlify/vite-plugin-vue-i18n": "^3.4.0",
        "@intlify/vue-i18n-loader": "^4.2.0",
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/line-clamp": "^0.4.0",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vue/compiler-sfc": "^3.0.5",
        "autoprefixer": "^10.4.7",
        "axios": "^0.21",
        "compression-webpack-plugin": "^9.2.0",
        "laravel-echo": "^1.11.4",
        "laravel-mix": "^6.0.6",
        "laravel-vite-plugin": "^0.3.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "postcss-import": "^12.0.1",
        "pusher-js": "^7.0.6",
        "tailwindcss": "^3.1.4",
        "vite": "^2.9.14",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2"
    },
    "dependencies": {
        "@headlessui/vue": "^1.5.0",
        "@heroicons/vue": "^1.0.6",
        "dayjs": "^1.11.0",
        "vue-i18n": "^9.1.9",
        "vue3-charts": "^1.1.31"
    }
}

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        vueI18n({
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            // you need to set i18n resource including paths !
            // include: path.resolve(__dirname, './resources/js/app.js')
        })
    ],
});

import { createI18n } from '@intlify/vite-plugin-vue-i18n'

const i18n = createI18n({
    locale: localStorage.getItem("lang"), // set locale
    fallbackLocale: 'en', // set fallback locale
})

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18n)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
    Memory: 3.07 GB / 15.95 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    npm: 8.12.2 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49)
    Internet Explorer: 11.0.19041.1566

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.

Clear and concise description of the problem

According to the README, the latest @intlify/vue-i18n-loader requires Vue I18n v9:

This package of @intlify/bundle-tools is for Vue I18n v9 or later!
The version for Vue I18n v8.x is now in @intlify/vue-i18n-loader v1.x!

This should be enforced in the package.json.

Suggested solution

Use optional peerDependency to require v9 if vue-i18n is installed.

{
  "peerDependencies": {
    "vue-i18n": "^9.0.0"
  },
  "peerDependenciesMeta": {
    "vue-i18n": {
      "optional": true
    }
  }
}

Alternative

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.

This is not exactly an issue of vue-i18n-loader, I am writing it as a reminder for others that may face this problem:
if, inside a single file component, you get the error "Cannot translate the value of keypath...", it may be cause by npm cache.

Solution:

• Check, double check that your vue-i18n-loader has been properly configured
• Add a syntax error inside the <i18n>{...}</i18n> tag
• Check that webpack does not compile because the loader complains about the syntax error (if it doesn't, than you didn't configure properly the vue-i18n-loader inside webpack config file)
• Remove the syntax error
• Remove node_modules folder (the whole folder, not just the i18n folders)
• run npm cache clean
• run npm install

After that, it worked for me (and my colleagues facing the same problem).

Clear and concise description of the problem

For the rollup-plugin-vue-i18n, we need the below options:

• defaultSFCLang spec: https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#defaultsfclang
• globalSFCScope spec: https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#globalsfcscope

Suggested solution

Let try to port from vite-plugin-vue-i18n.

Alternative

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.

Clear and concise description of the problem

[email protected]: The engine "node" is incompatible with this module
Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "15.12.0"

Suggested solution

p-plugin-vue-i18n --binaries --browsers
Need to install the following packages:
envinfo
Ok to proceed? (y) y

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i3-10100T CPU @ 3.00GHz
Memory: 564.77 MB / 3.75 GB
Binaries:
Node: 15.12.0 - C:\OpenServer\modules\bin\node.EXE
Yarn: 1.22.10 - C:\OpenServer\modules\bin\yarn.CMD
npm: 3.10.10 - c:\OpenServer\node_modules.bin\npm.CMD
Browsers:
Internet Explorer: 11.0.19041.1
npmPackages:
vite: latest => 2.4.3
vue: latest => 2.6.14

Alternative

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.

Reporting a bug?

file to parse yaml messages that values contains space.

Expected behavior

yaml format should be correct parse that values has space:

  desc: Opinionated Vite Starter Template

Reproduction

demo
create a i18n message yaml format. then add following content:

button:
  about: About
  back: Back
  go: GO
  home: Home
  toggle_dark: Toggle dark mode
  toggle_langs: Change languages
intro:
  desc: Opinionated Vite Starter Template
  dynamic-route: Demo of dynamic route
  hi: Hi, {name}!
  aka: Also known as
  whats-your-name: What's your name?
not-found: Not found

npm run dev to start vite project, and error will occured.

Issue Package

vite-plugin-vue-i18n

System Info

system: macos 12.1
node: v16.15.1
pnpm: 7.1.6
chrome: Version 102.0.5005.115 (Official Build) (arm64)
package.json:

{
  "name": "web-client",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@shimi-edu/api": "workspace:*",
    "pinia": "^2.0.14",
    "vue": "^3.2.37",
    "vue-i18n": "9",
    "vue-router": "^4.0.16"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "prettier": "^2.6.2",
    "typescript": "^4.7.3",
    "vite": "^2.9.12",
    "vue-tsc": "^0.34.17"
  }
}

Screenshot

Additional context

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.

Currently the i18n block allow specifying a .json file as the source like so:

<i18n src="./common/locales.json"></i18n>

But as the dynamic feature of this issue is not yet implemented, I was wondering if there was a workaround by importing a .js file that exports the object like so:

//langVar.js
import langVar from './myComponent/langVar/index.json'
export default {
 langVar: langVar
}

and then in my component import langVar.js, either by:

<i18n src="./langVar.js"></i18n>

or in some other fashion? I need to keep my language files for the component separate to support my language translation system, which is why I need this.

Hello,

To localize the application, I need to send the JSON files to a translator. I can't send whole components with template, css and script.
The tag works perfectly but I'd like to have multiple sources. I have a 'common.json' with the standard strings and 'myComponent.json' for the specific ones.
I tried to add 2 tags i18n unfortunately.

Is there a way to import multiple json files for 1 component?
Thanks.

Reporting a bug?

when i build with vite - error

Expected behavior

[vite-plugin-vue-i18n] Cannot read properties of undefined (reading 'message')
file: D:/DaOffice/intra-ionic/node_modules/twilio-video/package.json
error during build:
TypeError: Cannot read properties of undefined (reading 'message')

Reproduction

add "twilio-video": "^2.21.1",
run npm vue-tsc --noEmit && vite build

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
    Memory: 7.36 GB / 15.87 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^4.0.0 => 4.0.0
    vite: ^2.9.0 => 2.9.9
    vue: ^3.2.26 => 3.2.33
    vue-i18n: ^9.2.0-beta.23 => 9.2.0-beta.35

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.

Reporting a bug?

vite-plugin-vue-i18n conflicts with unocss and causes vite build to fail when sourcemaps: true

The error:

> vite build

vite v2.9.6 building for production...
✓ 34 modules transformed.
rendering chunks (1)...Multiple conflicting contents for sourcemap source /Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/src/HelloWorld.vue
error during build:
Error: Multiple conflicting contents for sourcemap source /Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/src/HelloWorld.vue
    at error (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Link.traceMappings (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:14020:32)
    at collapseSourcemaps (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:14113:63)
    at Chunk.render (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:14978:19)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async /Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:16074:40
    at async Promise.all (index 0)
    at async Bundle.addFinalizedChunksToBundle (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:16072:9)
    at async Bundle.generate (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:16052:13)
    at async /Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:23679:27
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `vite build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/stephenhebert/.npm/_logs/2022-04-27T17_24_11_232Z-debug.log

It seems that having these two things in the same file is causing the issue, though neither on its own would cause a failure:

Vue I18n SFC block:

<i18n>
{
  "en": {
    "Twitter": "Twitter"
  },
  "es": {
  }
}
</i18n>

• this also seems to only happen if more than one locale is provided

UnoCSS Variant Group:

<div class="lt-sm:(text-white max-w-292px)">Hello World</div>

Expected behavior

Vite build should run as expected and output ES modules with sourcemaps

Reproduction

https://github.com/stephenhebert/vue-i18n-unocss-issue-reproduction

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 78.62 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox Developer Edition: 100.0
    Safari: 15.1
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^3.4.0 => 3.4.0 
    vite: ^2.9.6 => 2.9.6 
    vue: ^3.2.31 => 3.2.31 
    vue-i18n: ^9.1.9 => 9.1.9

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.

Hi owners and contributors,

I like to learn if it's possible and how to do a few advanced features for message definition in the vue-i18n-loader:

1. add parameter into a message
2. allow messages to behave differently for singular, plural, masculine, feminine, number changes in russian, etc?
3. include comment in a structured way so we can programatically send the messages for 3rd party translation services.

Thank you!

Requesting the ability to include a json file by having a variable in the src path
ie,

<i18n src=~/data/test/${process.env.locale}.json></i18n>

For frameworks that generate static files (ie, Nuxt), this would allow us to reduce load size, especially if a page is content heavy