vue-cli: New vue-cli application fails to compile due to eslint-loader

As @ikitozen mentioned

"resolutions": { "eslint-loader": "2.1.2" }

in package.json seems to do the trick.

@maxql only works with yarn, not npm

For npm users it should just be npm i eslint-loader@2.1.2 right?

Another workaround would probably be to disable lintOnSave:

//vue.config.js
module.exports = {
  lintOnSave: false,
}

which should keep webpack from loading eslint-loader in the first place.

I prefer lint on commit anyway.

not fixed by npm i eslint-loader@2.1.2

@mudin Maybe you need to clear the npm cache or manually change the @vue/cli-plugin-eslint version in package.json to ^3.9.1

you will have to remove /node_modules and package-lock.json first, then add e: slint-loader to your package.json as a devDependency:

"devDependencies": {
  "eslint-loader": "2.1.2" // note this strict version, not "^2.1.2"
}

then run npm install again and this time, the cli-plugin-eslint should end up with the older, working version.

Once eslint-loader has been fixed you can remove that dependency, and reinstall all packages again.

For anyone else diving into it, I think it’s related to this change in eslint-loader that was meant to help support eslint 6. It’s adding /package.json in situations where the userEslintPath seems to already be a file rather than a directory. This is resulting in eslint-loader trying to find the .../api.js/package.json path.

https://github.com/webpack-contrib/eslint-loader/commit/b6c3938aae61c0390ac8d941af50cf36df14cfc3#diff-168726dbe96b3ce427e7fedce31bb0bcR167

Same issue here as well. I created an issue similar to this one but on the vuejs/vue repository which I was told to come here.

OS: Windows 7 Ultimate Service Pack 1 node -v: v8.11.3 npm -v: 6.9.0 vue -V: 3.9.0

npm run serve

> testvue2@0.1.0 serve E:\xampp\htdocs\testvue2
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors


Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Cannot find module 'E:\xampp\htdocs\testvue2\node_modules\eslint\lib\api.js/package.json'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.module.exports (E:\xampp\htdocs\testvue2\node_modules\eslint-loader\index.js:170:23)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Finally, i found the correct way is setting lintOnSave: false.

//vue.config.js
module.exports = {
  lintOnSave: false,
}

Here is the quote from official docs:

When set to true or ‘warning’, eslint-loader will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation, so this is a good default for development.

hi, where´s the vue.config.js?

@sodatea yeah!!! I’ve cleared cache and success now! thanks The issue is fixed in version 3.9.1!

Sorry for the inconvenience. We did a quick fix to work around the buggy behavior of eslint-loader v2.2. So this issue should have been fixed now.

I could have it fixed earlier but at that time I was too sleepy to wait for the CI results to come out. So sorry for that 😂😂

Also receiving this compile error after updating to v.3.9.0. Reverted to eslint-loader@2.1.2 per @maxql’s response.

更新到 3.9.0后，创建的项目，执行： npm run serve，出现下面错误：

Module build failed (from ./node_modules/eslint-loader/index.js): Error: Cannot find module ‘…/node_modules/eslint/lib/api.js/package.json’ at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15) at Function.Module._load (internal/modules/cjs/loader.js:508:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.module.exports (…/node_modules/eslint-loader/index.js:170:23)

You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file.

怎么解决啊。

– it’s ok npm i eslint-loader@2.1.2

same issue here, fixed by freezing eslint-loader to version 2.1.2 for now

Looks like a eslint-loader 2.2.0 issue https://github.com/webpack-contrib/eslint-loader/commit/b6c3938aae61c0390ac8d941af50cf36df14cfc3

For nuxt users and encountered this error, if you don’t need eslint and want to save time. Just remove the ‘@nuxtjs/eslint-module’ in nuxt.config.js

buildModules: [

    // https://go.nuxtjs.dev/eslint
    //'@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],

same problem here ofc after update! Works by doing npm i eslint-loader@2.1.2. Looking forward to fix! 😃