[vite] Error if using HTML tags inside a file referenced by SFC block "src" attribute

[Lutymane]

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.

[kazupon]

Thank you for your reporting!

Unfortunately, I could not reproduce this issue. 😞
We need a minimum reproduction code, so Could you give us it?

[Lutymane]

Here I made a min reproduction:
https://github.com/Lutymane/vite-i18n-bug

The interesting part is that the bug occurs ONLY after first Vite restart. Meaning it will work fine for the first time and never again.

ALSO I found another issue. The global defaultSFCLang setting is not applied for tags with src attribute:

12:55:22 [vite] Internal server error: Unexpected identifier 'IDE'.
  Plugin: vite-plugin-vue-i18n
  File: C:/[...]/i18n-src-bug/src/locale.en.yaml?vue&type=i18n&index=0&src&lang.i18n

[kazupon]

Thank you for your reproduction repo!
I'll check your repo.

[Lutymane]

Oh, I also realized now that vite build fails on both < and {'<'}, so it's impossible to build the project having HTML in locales

[ssuess]

Is there any movement on this? For now, I have had to change every instance that contains html from something like this:
<i18n src="../i18n-compiled/myfile.json"></i18n>
to
<i18n>{"en-GB":{"description":"<p>Some <em>HTML</em> stuff</p>"}}</i18n>
which completley screws up our ability to feed in translations from our outside system automatically.

[gabaum10]

It's even worse with latest because the build won't even go through. Previously, it just wouldn't generate/add the translations. Now the build spits out these errors:

ERROR in ../i18n/web/locale/Component.json?vue&type=custom&index=0&blockType=i18n&issuerPath=src%2Fcomponents%2Fcontainer%2Fworkflows%2Fgrids%Component.vue (./node_modules/@intlify/vue-i18n-loader/lib/index.js!../i18n/web/locale/Component.json?vue&type=custom&index=0&blockType=i18n&issuerPath=%2Fsrc%2Fcomponents%2Fcontainer%FComponent.vue)
Module Error (from ./node_modules/@intlify/vue-i18n-loader/lib/index.js):
(Emitted value instead of an instance of Error) [vue-i18n-loader]: /project/i18n/web/locale/Component.json Detected HTML

Help! I have like 400+ files that all contain (safe) HTML. Is there really no workaround for this?

[acnowland]

It seems there is a way to toggle strictMessage to false and escapeHtml to true in an options object, just unsure where to place this to get it to work. Inside of our webpack, I have tried to pass in

options: {
  strictMessage: false,
  escapeHtml: true
  }

both on its own and inside of use: [ { options: {xyz}}]

but continue to see the errors show on build

just editing a bit here: after further looking it would probably go inside of the options when you createI18n() but even setting strictMessage: false, there still yields the errors messages.

[ankurk91]

rules: [
        {
          test: /\.(json5?|ya?ml)$/, 
          type: 'javascript/auto',
          loader: '@intlify/vue-i18n-loader',
          options: {
            strictMessage: false
          },
          include: [ 
            require('path').resolve(__dirname, 'src/locales')
          ]
        },
      ]

I tried to pass options like this but it does not work.

We have override the package via yarn resolutions to make it work

"resolutions": {
    "@intlify/vue-i18n-loader/**/@intlify/bundle-utils" : "file:./local_packages/@intlify/bundle-utils"
  },

[tushar-compro]

Hi @kazupon ,

Is there any update on this? Can you please suggest how can we add html tags in localization files?

Regards

[thibautlukowiak]

Up please ? Did someone find a solution ?

[tushar-compro]

Hi @thibautlukowiak ,

You can add following to "@nuxtjs/i18n" configuration in nuxt.config.ts. It allows the localization files to have html tags.

compilation: {
strictMessage: false,
}