Cannot use @ in translated message

[josepaiva94]

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

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

[kazupon]

This is an issue of `@intlify/bundle-tools. I'll transfer for repos

[kazupon]

Thank you for your reporting!

This issue is @intlify/vue-i18n-loader implementation issue. @ character is a special character from vue-i18n@v9 https://vue-i18n.intlify.dev/guide/essentials/syntax.html#special-characters

So, The message compiler that is used in vue-i18n occurs errors the following:

errors [
        {
          code: 10,
          location: { start: [Object], end: [Object] },
          domain: 'tokenizer',
          message: 'Invalid linked format'
        },
        {
          code: 14,
          location: { start: [Object], end: [Object] },
          domain: 'parser',
          message: "Unexpected lexical analysis in token: 's are not…'"
        },
        {
          code: 13,
          location: { start: [Object], end: [Object] },
          domain: 'parser',
          message: 'Unexpected empty linked key'
        }
      ]

We need to fix @intlify/vue-i18n-loader, so we have it display the human-readable error messages.

you can avoid @ special character with using literal interpolation :) https://vue-i18n.intlify.dev/guide/essentials/syntax.html#literal-interpolation

[visualjerk]

What do you think about making special-characters configurable? Something like:

VueI18n.createI18n({
  messages,
  specialCharacters: {
    linked: '~@',
  }
})