Using HTML in SFC results in parsing issue Unexpected scalar at node end

[casperboone]

Reporting a bug?

I'm trying to use short bits of html for text formatting in Nuxt. However, the yaml-eslint-parser package that is used does not seem to allow that. It throws an error saying "Unexpected scalar token". I tried changing the formatting from yaml to json, but that does not seem to have any effect, since the yaml-eslint-parser seems to be used for both cases.

Expected behavior

Parsing the translation values regardless of its HTML content, when strictMessage is disabled.

Reproduction

https://github.com/casperboone/nuxt-i18n-sfc-html-bug-reproduction

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 694.39 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - ~/.nvm/versions/node/v21.7.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v21.7.1/bin/npm
  Browsers:
    Brave Browser: 120.1.61.109
    Chrome: 116.0.5845.140
    Safari: 17.2.1
  npmPackages:
    vue: ^3.4.21 => 3.4.21

Screenshot

No response

Additional context

Unexpected scalar token
at Context.throwError (<redacted>/node_modules/yaml-eslint-parser/lib/context.js:80:15)
at processDoc (<redacted>/node_modules/yaml-eslint-parser/lib/yaml-cst-parse.js:16:23)
at parseAllDocsToCST (<redacted>/node_modules/yaml-eslint-parser/lib/yaml-cst-parse.js:31:9)
at parseForESLint (<redacted>/node_modules/yaml-eslint-parser/lib/parser.js:13:57)
at parseYAML (<redacted>/node_modules/yaml-eslint-parser/lib/index.js:46:40)
at generate$1 (file://<redacted>/node_modules/@intlify/bundle-utils/lib/index.mjs:598:13)
at TransformContext.transform (file://<redacted>/node_modules/@intlify/unplugin-vue-i18n/lib/index.mjs:527:48)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file://<redacted>/node_modules/vite-plugin-inspect/dist/index.mjs:377:17
at async file://<redacted>/node_modules/vite-plugin-inspect/dist/index.mjs:377:17 (x2)

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.

[Sceat]

I have this error when translations are too long, if I use multiline yaml it kinda works

[joaovitoras]

This is happening because of devtools
Debugging the parameters received here at yamlParse
found this in my local project

the value is equal to:

text: "My text with html <b data-v-inspector="components/exmaple/index.vue:20:33">{text}</b>"

Devtools parsed as html template
This prevent the error until it be fixed

// nunxt.config.ts
...
devtools: {
  enabled: true,
  componentInspector: false,
}
...