Incorrect eslint error when upgrade to 0.5.0

[Miaoxingren]

Please look at this repo: https://github.com/Miaoxingren/test-nuxt-eslint. Downgrade eslint-plugin-nuxt to @0.4.3 solved the problem.

[clarkdo]

From the error log, I think the errors are lint errors from new rules of vue eslint plugin, so I suggest fixing the lint errors in your repo, if there’s special requirement, you can exclude those rules.

[Miaoxingren]

Those are valid according to eslint-plugin-vue:

<template>
  <!-- ✓ GOOD -->
  <component :is="type"/>
  <component v-bind:is="type"/>

  <!-- ✗ BAD -->
  <component/>
  <component is="type"/>
</template>

I follow the rules in my code:

<template>
  <div class="container">
    <div>
      ....
      <component :is="myComp" />
      ....
    </div>
  </div>
</template>

But I got lint errors with @0.5.0 :

$ npm run lint

> test-nuxt-eslint@1.0.0 lint E:\lib_project\test-nuxt-eslint
> eslint --ext .js,.vue --ignore-path .gitignore .

....

E:\lib_project\test-nuxt-eslint\pages\index.vue
  8:7  error  Expected '<component>' elements to have 'v-bind:is' attribute  vue/require-component-is

✖ 3 problems (2 errors, 1 warning)

[clarkdo]

Looks related to vuejs/eslint-plugin-vue#869

I'll have a look and figure out the root cause.

[mwidmann]

I'm having the above problem as well. Manually installing eslint-plugin-vue@6 as suggested by @ota-meshi in vuejs/eslint-plugin-vue#869 (comment) solved the issue for me. So maybe it's just a dependency that needs to be updated.

this brought down the issues reported in linting from

107 problems (32 errors, 75 warnings)

to

37 problems (0 errors, 37 warnings)

But those are just issues that arose due to the rule updates.

[EDIT] I see it has already been updated in master and therefore it should be fixed soon. 👍

[clarkdo]

eslint-plugin-nuxt@0.5.0 is using eslint-plugin-vue@^6.0.0, so if you have direct dependency or hoisted eslint-plugin-vue@5, please upgrade it to v6.

[ramiroazar]

I'm also experiencing this issue after installing nuxt using yarn create nuxt-app.

Running yarn list eslint-plugin-vue outputs the following.

├─ eslint-plugin-nuxt@0.5.0
│  └─ eslint-plugin-vue@6.0.1
└─ eslint-plugin-vue@5.2.3

Not sure where v5.2.3 is coming from, but running yarn run dev outputs the following.

error Expected '<component>' elements to have 'v-bind:is' attribute vue/require-component-is

[clarkdo]

eslint-plugin-vue@5 issue will be fixed in next release of https://github.com/nuxt/eslint-config

[MrToxy]

Still not fixed

[clarkdo]

@MrToxy Can you please confirm which verison of eslint-config you're installing ?

yarn why @nuxtjs/eslint-config
yarn why eslint-plugin-vue

[simonmaass]

same problem

[prabodhana]

I have same problem

[coeurofbear]

I also have the problem.

[clarkdo]

@MrToxy Can you please confirm which verison of eslint-config you're installing ?

yarn why @nuxtjs/eslint-config
yarn why eslint-plugin-vue

@coeurofbear Can you please confirm above comment about package version?

[nasimuddin01]

Is there any solve to this problem? Been stuck here for two days. The problem arose when I upgraded all my package.

[syffs]

@clarkdo same problem

There seem to be a conflict between @nuxtjs/eslint-config and eslint-plugin-nuxt:

$ yarn why @nuxtjs/eslint-config
yarn why v1.22.5
[1/4] Why do we have the module "@nuxtjs/eslint-config"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@nuxtjs/eslint-config@1.1.2"
info Has been hoisted to "@nuxtjs/eslint-config"
info This module exists because it's specified in "devDependencies".
Done in 1.00s.
$ yarn why eslint-plugin-vue
yarn why v1.22.5
[1/4] Why do we have the module "eslint-plugin-vue"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "eslint-plugin-vue@5.2.3"
info Reasons this module exists
   - "@nuxtjs#eslint-config" depends on it
   - Hoisted from "@nuxtjs#eslint-config#eslint-plugin-vue"
=> Found "eslint-plugin-nuxt#eslint-plugin-vue@6.2.2"
info This module exists because "eslint-plugin-nuxt" depends on it.
Done in 1.07s.
$ yarn list --pattern="eslint-plugin-vue"
yarn list v1.22.5
├─ eslint-plugin-nuxt@1.0.0
│  └─ eslint-plugin-vue@6.2.2
└─ eslint-plugin-vue@5.2.3

this issue has been opened for a while, any workaround ?

[clarkdo]

Hi @syffs
Looks you’re having outdated @nuxtjs/eslint-config, the latest version is 3.1.0 which is using eslint-plugin-vue v6.

Can you try to upgrade @nuxtjs/eslint-config ?

[syffs]

Hi @clarkdo

You're right, I used create-nuxt-app assuming it was up-to-date. Upgrading everything fixed it ! cheers.