Eslint-plugin-vue: vue/require-component-is false positive

Created on 5 Apr 2019  Â·  3Comments  Â·  Source: vuejs/eslint-plugin-vue

[edit] It turns out this only happens for vue-eslint-parser@^6.0.0. The parsing changes cause this.

Tell us about your environment

  • ESLint version: v5.16.0
  • eslint-plugin-vue version: 5.2.2
  • vue-eslint-parser version: 6.0.3
  • Node version: v10.15.0

Please show your full configuration:

module.exports = {
    plugins: ["vue"],
    extends: [
    ],
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "babel-eslint",
        ecmaVersion: 2019,
        sourceType: "module"
    },
    rules: {
        "vue/require-component-is": "error"
    }
};

What did you do?
I tried linting the following component in my project using the following command line:

npx eslint Component.vue
// Component.vue
<template><component v-bind:is="a"/></template>

What did you expect to happen?
I expected the component to be valid and no error to be reported.

What actually happened?

$ npx eslint Component.vue 

/home/jmasson/dev/tuleap/Component.vue
  1:11  error  Expected '<component>' elements to have 'v-bind:is' attribute  vue/require-component-is

✖ 1 problem (1 error, 0 warnings)

The rule fails because the parsing changed with vue-eslint-parser v6

Most helpful comment

[edit] I edited the original post instead to narrow down the problem.
It turns out this is because I was using vue-eslint-parser v6

Even removing all the rules altogether and leaving only "eslint:recommended", "plugin:vue/recommended", I still get the require-component-is error:

/home/jmasson/dev/tuleap/PostActionsSection.vue
  2:1   warning  Expected indentation of 2 spaces but found 4 spaces            vue/html-indent
  2:5   error    Expected '<component>' elements to have 'v-bind:is' attribute  vue/require-component-is
  2:29  warning  Expected a space before '/>', but not found                    vue/html-closing-bracket-spacing

✖ 3 problems (1 error, 2 warnings)
  0 errors and 2 warnings potentially fixable with the `--fix` option.

All 3 comments

[edit] I edited the original post instead to narrow down the problem.
It turns out this is because I was using vue-eslint-parser v6

Even removing all the rules altogether and leaving only "eslint:recommended", "plugin:vue/recommended", I still get the require-component-is error:

/home/jmasson/dev/tuleap/PostActionsSection.vue
  2:1   warning  Expected indentation of 2 spaces but found 4 spaces            vue/html-indent
  2:5   error    Expected '<component>' elements to have 'v-bind:is' attribute  vue/require-component-is
  2:29  warning  Expected a space before '/>', but not found                    vue/html-closing-bracket-spacing

✖ 3 problems (1 error, 2 warnings)
  0 errors and 2 warnings potentially fixable with the `--fix` option.

Any progress on getting this resolved?

Thank you for this issue.

eslint-plugin-vue@5 and vue-eslint-parser@6 are not compatible. Please use eslint-plugin-vue@6.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

xiGUAwanOU picture xiGUAwanOU  Â·  3Comments

lichnow picture lichnow  Â·  3Comments

filipalacerda picture filipalacerda  Â·  4Comments

mitar picture mitar  Â·  3Comments

Mouvedia picture Mouvedia  Â·  3Comments