title: How to Resolve "Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript'" in Vue SFC
body: <p>I'm getting this strange error with eslint inside of a Vue SFC template.</p>
  <p><code>Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (1:0)</code> (Which appears to be throwing on the opening tag of the Vue SFC <code>&lt;template&gt;</code> tag.)</p>
  <p>Here's the Vue SFC (literally the stock Vite <code>App.vue</code> file)</p>
  <pre><code>&lt;template&gt;
    &lt;img
      alt=&quot;Vue logo&quot;
      src=&quot;./assets/logo.png&quot;
    &gt;
    &lt;HelloWorld
      msg=&quot;Hello Vue 3 + Vite&quot;
    /&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Here's my <code>.eslintrc</code> file</p>
  <pre><code>module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:vue/essential',
      'airbnb-base',
    ],
    parser: '@babel/eslint-parser',
    parserOptions: {
      ecmaVersion: 12,
      requireConfigFile: false,
      sourceType: 'module',
    },
    plugins: [
      'vue',
    ],
    rules: {
      'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
      'vue/no-multiple-template-root': 'off',
    },
  };
  </code></pre>
  <p>And my <code>package.json</code> in case it's relevant</p>
  <pre><code>{
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;build&quot;: &quot;vite build&quot;,
      &quot;dev&quot;: &quot;vite&quot;,
      &quot;lint&quot;: &quot;eslint **/*.{js,vue}&quot;,
      &quot;serve&quot;: &quot;vite preview&quot;
    },
    &quot;dependencies&quot;: {
      &quot;ky&quot;: &quot;^0.28.5&quot;,
      &quot;vue&quot;: &quot;^3.0.5&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.15.0&quot;,
      &quot;@babel/eslint-parser&quot;: &quot;^7.15.0&quot;,
      &quot;@vitejs/plugin-vue&quot;: &quot;^1.2.3&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.0.5&quot;,
      &quot;eslint&quot;: &quot;^7.32.0&quot;,
      &quot;eslint-config-airbnb-base&quot;: &quot;^14.2.1&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.24.2&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^7.17.0&quot;,
      &quot;jest&quot;: &quot;^27.1.0&quot;,
      &quot;vite&quot;: &quot;^2.3.7&quot;
    }
  }
  </code></pre>
  <p>I'm not really sure what would cause this since I have</p>
  <pre><code>  extends: [
      'plugin:vue/essential',
      'airbnb-base',
    ],
  </code></pre>
  <p>and</p>
  <pre><code>  plugins: [
      'vue',
    ],
  </code></pre>
  <p>within <code>.eslintrc</code>.</p>
  <p>I'd like to know how to resolve this, but I would also like to understand what's going on here to cause this error to be thrown in the first place.</p>