vuejs/vue-eslint-parser

Invalid token type for mustache expression inside `<textarea>`

Opened this issue · 0 comments

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I'm using eslint-plugin-vue.
  • I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

9.22.0

What version of eslint-plugin-vue and vue-eslint-parser are you using?

  • vue-eslint-parser@10.0.0
  • eslint-plugin-vue@10.1.1

What did you do?

Configuration
import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'

export default defineConfig([
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
  },

  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],
])
<template>
  <textarea>foo{{bar;}}</textarea>
</template>

What did you expect to happen?

The token type for foo and bar; should be both HTMLRCDataText when checking with the following code:

require('vue-eslint-parser').parse('<template><textarea>foo{{bar;}}</textarea><template>').templateBody.tokens;

What actually happened?

The token for foo is HTMLRCDataText, but it is HTMLRawText for bar; as in the below result:

[
  {
    type: 'HTMLTagOpen',
    range: [ 0, 9 ],
    loc: { start: [Object], end: [Object] },
    value: 'template'
  },
  {
    type: 'HTMLTagClose',
    range: [ 9, 10 ],
    loc: { start: [Object], end: [Object] },
    value: ''
  },
  {
    type: 'HTMLTagOpen',
    range: [ 10, 19 ],
    loc: { start: [Object], end: [Object] },
    value: 'textarea'
  },
  {
    type: 'HTMLTagClose',
    range: [ 19, 20 ],
    loc: { start: [Object], end: [Object] },
    value: ''
  },
  {
    type: 'HTMLRCDataText',
    range: [ 20, 23 ],
    loc: { start: [Object], end: [Object] },
    value: 'foo'
  },
  {
    type: 'VExpressionStart',
    range: [ 23, 25 ],
    loc: { start: [Object], end: [Object] },
    value: '{{'
  },
  {
    type: 'HTMLRawText',
    range: [ 25, 29 ],
    loc: { start: [Object], end: [Object] },
    value: 'bar;'
  },
  {
    type: 'VExpressionEnd',
    range: [ 29, 31 ],
    loc: { start: [Object], end: [Object] },
    value: '}}'
  },
  {
    type: 'HTMLEndTagOpen',
    range: [ 31, 41 ],
    loc: { start: [Object], end: [Object] },
    value: 'textarea'
  },
  {
    type: 'HTMLTagClose',
    range: [ 41, 42 ],
    loc: { start: [Object], end: [Object] },
    value: ''
  },
  {
    type: 'HTMLTagOpen',
    range: [ 42, 51 ],
    loc: { start: [Object], end: [Object] },
    value: 'template'
  },
  {
    type: 'HTMLTagClose',
    range: [ 51, 52 ],
    loc: { start: [Object], end: [Object] },
    value: ''
  }
]

Link to Minimal Reproducible Example

https://github.com/ws807/mustache-invalid-token-type

Additional comments

It seems this issue does not cuase any visible problems currently.

#257 solves this problem.