Eslint-plugin-vue: Cannot find module 'eslint/lib/formatters/stylish' when using ESLint ^6.0

Created on 25 Jun 2019 · 7Comments · Source: vuejs/eslint-plugin-vue

I am using "latest" on many deps in my package.json and today I started getting this error

 98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                                                                                              12:21:12 p.m.

Module build failed (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
Error: Cannot find module 'eslint/lib/formatters/stylish'
Require stack:
- ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js
- ./node_modules/loader-runner/lib/loadLoader.js
- ./node_modules/loader-runner/lib/LoaderRunner.js
- ./node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js
- ./node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js
- ./node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js
- ./node_modules/@vue/cli-service/node_modules/webpack/lib/webpack.js
- ./node_modules/@vue/cli-service/lib/config/base.js
- ./node_modules/@vue/cli-service/lib/Service.js
- ./node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
    at Function.Module._load (internal/modules/cjs/loader.js:526:27)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.module.exports (./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:196:28)

during yarn install:

eslint-plugin-vue > [email protected]" has unmet peer dependency "eslint@^5.0.0

this package.json was working fine before today:

  "devDependencies": {
    "@babel/core": "latest",
    "@vue/cli-plugin-babel": "next",
    "@vue/cli-plugin-e2e-cypress": "next",
    "@vue/cli-plugin-eslint": "next",
    "@vue/cli-plugin-pwa": "next",
    "@vue/cli-plugin-unit-mocha": "next",
    "@vue/cli-service": "next",
    "@vue/eslint-config-airbnb": "latest",
    "@vue/test-utils": "latest",
    "chai": "latest",
    "eslint": "latest",
    "eslint-plugin-vue": "latest",
    "sass": "latest",
    "sass-loader": "latest",
    "vue-template-compiler": "latest"
  }

and as of today it isn't working anymore

I know using next/latest is not the best idea but this is only for development purposes

This works:

  "devDependencies": {
    "@babel/core": "latest",
    "@vue/cli-plugin-babel": "next",
    "@vue/cli-plugin-e2e-cypress": "next",
    "@vue/cli-plugin-eslint": "next",
    "@vue/cli-plugin-pwa": "next",
    "@vue/cli-plugin-unit-mocha": "next",
    "@vue/cli-service": "next",
    "@vue/eslint-config-airbnb": "latest",
    "@vue/test-utils": "latest",
    "chai": "latest",
    "eslint": "^5.0.0",
    "eslint-plugin-vue": "latest",
    "sass": "latest",
    "sass-loader": "latest",
    "vue-template-compiler": "latest"
  }

this does not:

  "devDependencies": {
    "@babel/core": "latest",
    "@vue/cli-plugin-babel": "next",
    "@vue/cli-plugin-e2e-cypress": "next",
    "@vue/cli-plugin-eslint": "next",
    "@vue/cli-plugin-pwa": "next",
    "@vue/cli-plugin-unit-mocha": "next",
    "@vue/cli-service": "next",
    "@vue/eslint-config-airbnb": "latest",
    "@vue/test-utils": "latest",
    "chai": "latest",
    "eslint": "^6.0.0",
    "eslint-plugin-vue": "latest",
    "sass": "latest",
    "sass-loader": "latest",
    "vue-template-compiler": "latest"
  }

Here is the printout of yarn list --depth=0 | grep eslint on the configuration that does not work

├─ @vue/[email protected]
├─ @vue/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]

Source

vesper8

👍3

Most helpful comment

Yep, can confirm, issue happens with ESLint ^6.0, reverting back to version 5 resolves the issue.

- "eslint": "^6.0.1"
+ "eslint": "^5.16.0"

vinayakkulkarni on 25 Jun 2019

👍38 ❤6 🎉6 🚀5

All 7 comments

Yep, can confirm, issue happens with ESLint ^6.0, reverting back to version 5 resolves the issue.

- "eslint": "^6.0.1"
+ "eslint": "^5.16.0"

vinayakkulkarni on 25 Jun 2019

👍38 ❤6 🎉6 🚀5

Thank you for your report. However, this is not related to this plugin. The error came from eslint-loader.

mysticatea on 25 Jun 2019

I upgraded my Nuxt project with yarn upgrade --latest and faced this problem. Tried @vinayakkulkarni solution, and can confirmed that reverting back to version 5 resolves the issue.

sangdth on 29 Jun 2019

https://github.com/webpack-contrib/eslint-loader/issues/238#issuecomment-505672107

askart on 2 Jul 2019

In the eslint-loader README file you can see they mention how to override the path...

formatter (default: eslint stylish formatter)
Loader accepts a function that will have one argument: an array of eslint messages (object).
The function must return the output as a string.
You can use official eslint formatters.

module.exports = {
entry: "...",
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// several examples !

      // default value
      formatter: require("eslint/lib/formatters/stylish"),

      // community formatter
      formatter: require("eslint-friendly-formatter"),

      // custom formatter
      formatter: function(results) {
        // `results` format is available here
        // http://eslint.org/docs/developer-guide/nodejs-api.html#executeonfiles()

        // you should return a string
        // DO NOT USE console.*() directly !
        return "OUTPUT";
      }
    }
  }
]

}
};