Cannot disable warnHtmlInMessage

Doogiemuc commented 2 years ago

Reporting a bug?

I need to have HTML in my localized i18n messages. It is working fine. But vue-i18n-next ouputs warnings in the browser console. At first I thought this is an eslint issue. But it's vue-i18n-next related.

Here is my repo. It's a large mobile application (PWA, web based): https://github.com/Doogiemuc/liquido-mobile-pwa-vue3

My problem is actually simple: The project is running fine. But I see a lot of warnings in the browser console like this:

[intlify] Detected HTML in 'Hallo <b>{nickname}</b> ! '

This warning is coming from vue-i18n. I know what these warnings mean. (I know what an XSS-attack is.) My translations are fine. They are static. I want, and need to(!!!) use HTML in my vue-i18n translations.

=> I simply want to get rid of the warning.

Further references

This is how my vue-i18n translations look like:

    i18n: {
        messages: {
            en: {
                niceToMeetYou: "Hello <b>{nickname}</b> !"
            de: {
                niceToMeetYou: "Hallo <b>{nickname}</b> !"
                        [...]

This is the rule that I would like to disable globally in an .eslintrc.js config file https://eslint-plugin-vue-i18n.intlify.dev/rules/no-v-html.html

I also added the configuration option. Also did not help. The warnings are still there in the browser console: https://vue-i18n.intlify.dev/guide/migration/breaking.html#change-warnhtmlinmessage-option-default-value

const i18n = new createI18n({
    locale: "de",
    warnHtmlInMessage: 'off', // This should disable the warning in browser console. But it doesn't 
    messages: globalTranslations
})

I also tried warnHtmlInMessages: false No luck. Still warnings.

Expected behavior

When setting the warnHtmlInMessage property to 'off' then there should be no warning in the browser console.

Reproduction

Create a HelloWorld Vue app, e.g. with the CLi
Add i18n support
Add a translation message with HTML tags in its value as described above
Run the project
There will be a warning in the browser console, although, according to the config there shouldn't

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 237.28 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    npm: 8.1.2 - /usr/local/bin/npm
  Browsers:
    Firefox: 95.0.2
    Safari: 15.2
  npmPackages:
    @vue/cli-plugin-babel: ^3.3.0 => 3.3.0 
    @vue/cli-plugin-e2e-cypress: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-router: ^4.5.15 => 4.5.15 
    @vue/cli-plugin-unit-mocha: ^4.5.15 => 4.5.15 
    @vue/cli-service: ^4.5.15 => 4.5.15 
    @vue/compiler-sfc: ^3.0.0 => 3.2.26 
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.18 
    vue: ^3.0.0 => 3.2.26 
    vue-i18n: ^9.2.0-beta.25 => 9.2.0-beta.25 
    vue-router: ^4.0.0-0 => 4.0.12 
    vuedraggable: ^2.24.3 => 2.24.3

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
[X] The provided reproduction is a minimal reproducible example of the bug.

kazupon commented 2 years ago

I've just fixed with vue-i18n@v9.2.0-beta.26 https://github.com/intlify/vue-i18n-next/releases/tag/v9.2.0-beta.26

Please check it!

Doogiemuc commented 2 years ago

Works perfectly. Thank you very much for the quick fix!

andreasvirkus commented 2 years ago

For people using the composition API, it's warnHtmlMessage vs the warnHtmlInMessage in the regular options (no In)! 📌

So change

warnHtmlInMessage: 'off'

into

warnHtmlMessage: false

qnp commented 1 year ago

IMHO the existence of two distinct options, with distinct types, is misleading. Unification would be relevant.

nickdnk commented 7 months ago

This just tripped me up for a good 20 minutes. What is the purpose of having both warnHtmlMessage and warnInHtmlMessage? The latter did not work when set to off, but setting the former to false did. Version 9.10.2.

intlify / vue-i18n