A translation that has the '@' symbol in the JSON translation file an error will occur

[KishSiva]

Reporting a bug?

If there is a translation in a translation file (e.g. 'en.json') that contains the symbol @ the loader will return the error Module build failed: Error: Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String. It seems like vue-i18n-loader does not realize it is text.

Expected behavior

I expect my translations to be displayed on the page, not to receive an error message.

Reproduction

I ran this using the runtime version of vue-i18n (vue-i18n/dist/vue-i18n.runtime.esm-bundler.js), @intlify/vue-i18n-loader and webpack.

System Info

I ran this using the runtime version of vue-i18n (vue-i18n/dist/vue-i18n.runtime.esm-bundler.js) and @intlify/vue-i18n-loader using webpack.

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.

[Alex--C]

Our workaround is:
"foo{'@'}bar.com"

(see https://vue-i18n.intlify.dev/guide/essentials/syntax.html#literal-interpolation )

[michal-stachura]

Similar behavior with Nuxt3. With translations contains '@' sign (e.g. "placeholder_email": "[email protected]") I have an error.

[plugin:unplugin-vue-i18n] Invalid linked format (error code: 10) in /.../santri-online-app/locales/pl.json
  target message: [email protected]
  target message path: placeholder_email

  1  |  [email protected]
   |              ^

/.../santri-online-app/locales/pl.json

"placeholder_email": "your-email\\@example.com" - also doesn't work. Workaround given by @Alex--C works fine.