vuejs/vue-eslint-parser

`<textarea>` content after `}}` causes invalid `vue/no-parsing-error`

Closed 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>
  {{ 123 }}
  <textarea> }} <div </textarea>
</template>

What did you expect to happen?

npm run lint should report no error.

What actually happened?

Following errors occurred when running 'npm run lint'

/home/wschoi/mustache-bug-report/src/App.vue
  3:22  error  Parsing error: unexpected-character-in-attribute-name  vue/no-parsing-error
  3:22  error  Attribute name < is not valid                          vue/valid-attribute-name
  3:24  error  Parsing error: unexpected-solidus-in-tag               vue/no-parsing-error

Link to Minimal Reproducible Example

https://github.com/ws807/mustache-bug-report

Additional comments

Because <textarea> is a RCDATA element, <div inside the element should not be parsed as a tag start. <div should be displayed verbatim.

Note that if you do one of the following, no parsing error occurs:

  • Remove {{ 123 }}
  • Remove }} before the <div

This problem occurs because after processing{{ 123 }}, vExpressionScriptState holding DATA is not cleared to null.
When encounting }} before the <div, the state is restored from the incorrect vExpressionScriptState and becomes DATA.
So, it results in parsing <div in the DATA state instead of RCDATA.

#256 solves this problem.