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

Created on 3 Jul 2019  ·  41Comments  ·  Source: vuejs/vue-cli

Version

3.9.0

Environment info

Environment Info:

  System:
    OS: macOS Sierra 10.12.6
    CPU: (4) x64 Intel(R) Core(TM) i5-6287U CPU @ 3.10GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0.4
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.9.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.9.0 
    @vue/cli-plugin-babel: ^3.9.0 => 3.9.0 
    @vue/cli-plugin-eslint: ^3.9.0 => 3.9.0 
    @vue/cli-service: ^3.9.0 => 3.9.0 
    @vue/cli-shared-utils:  3.9.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-router: ^3.0.3 => 3.0.7 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.9.0

Steps to reproduce

>vue create new-app
>cd new-app
>npm run serve

What is expected?

INFO  Starting development server...
 98% after emitting CopyPlugin                                                .  
 DONE  Compiled successfully in 3435ms                               10:02:58 AM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.145.82.231:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

What is actually happening?

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

 ERROR  Failed to compile with 1 errors                               9:53:57 AM

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.

This is from a clean instantiation of a vue-cli application. No additional configuration to webpack or eslint. It had been working previously, so I'm thinking it could be a issue caused by a minor update to a dependency. Somewhere eslint-loader is getting a user defined eslint package path that does not exist.

bug eslint upstream
Source
picture lbicknese
👍69

Most helpful comment

As @ikitozen mentioned

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

in package.json seems to do the trick.

picture maxql on 3 Jul 2019
👍21 ❤9 🚀8 👀4 🎉3 😄3

All 41 comments

Seeing the same issue here.

zopu picture zopu on 3 Jul 2019

Tried version 3.4.1 and 3.9.0, same issue.
If creating a project without babel and linter, the issue is gone.

cgcgbcbc picture cgcgbcbc on 3 Jul 2019

same issue here

luisacatherine picture luisacatherine on 3 Jul 2019

Same issue here when upgrading from 3.6.0 to 3.9.0
Also happen in 3.7.0

TGilany picture TGilany on 3 Jul 2019

Same here.

alessandrotesoro picture alessandrotesoro on 3 Jul 2019

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

ikitozen picture ikitozen on 3 Jul 2019
👍2

As @ikitozen mentioned

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

in package.json seems to do the trick.

maxql picture maxql on 3 Jul 2019
👍21 ❤9 🚀8 👀4 🎉3 😄3

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

rdhelms picture rdhelms on 3 Jul 2019
👍4

And [email protected] was published a couple hours ago

rdhelms picture rdhelms on 3 Jul 2019

@maxql solution seems to work for now, thank you 👍

alessandrotesoro picture alessandrotesoro on 3 Jul 2019

更新到 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 [email protected]

lifanmvc picture lifanmvc on 3 Jul 2019
👍2

@maxql only works with yarn, not npm

gerenook picture gerenook on 3 Jul 2019

@maxql only works with yarn, not npm

For npm users it should just benpm i [email protected] right?

maxql picture maxql on 3 Jul 2019
👍15 ❤1

@maxql only works with yarn, not npm

For npm users it should just benpm i [email protected] right?

Yes, that's for npm.

pasqualevitiello picture pasqualevitiello on 3 Jul 2019

Same here.

donley828 picture donley828 on 3 Jul 2019

Also receiving this compile error after updating to v.3.9.0. Reverted to [email protected] per @maxql's response.

purplelady105 picture purplelady105 on 3 Jul 2019
👍3

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

vi

npm run serve

> [email protected] 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.
m-ahmadi picture m-ahmadi on 3 Jul 2019
👍4

same problem here ofc after update! Works by doing npm i [email protected]. Looking forward to fix! :)

luxwarp picture luxwarp on 3 Jul 2019
👍1

not fixed by npm i [email protected]

tharindusathis picture tharindusathis on 3 Jul 2019
👍5

I was able to fix the Vue UI "serve" task by downgrading to eslint-loader 2.1.2 as explained above. However, now I'm getting a "build" error:

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Cannot find module 'eslint/lib/formatters/stylish'
    at PoolWorker.fromErrorObj (C:\Temp\VS\Client\foo\node_modules\thread-loader\dist\WorkerPool.js:258:12)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.module.exports (C:\Temp\VS\Client\foo\node_modules\eslint-loader\index.js:196:28)

I'm using eslint 6, if that matters.

richardtallent picture richardtallent on 3 Jul 2019

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.

LinusBorg picture LinusBorg on 3 Jul 2019
👍9

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.

LinusBorg picture LinusBorg on 3 Jul 2019
👍7 ❤2 🎉2

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 😂😂

sodatea picture sodatea on 4 Jul 2019
👍2 🎉1

@sodatea Do you mean you did fix it in @vue.[email protected]? I've just checked still not working

mudin picture mudin on 4 Jul 2019

@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

sodatea picture sodatea on 4 Jul 2019
👍5 ❤1

@sodatea Do you mean you did fix it in @vue.[email protected]? I've just checked still not working

It works for me

davellanedam picture davellanedam on 4 Jul 2019

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

mudin picture mudin on 4 Jul 2019
👍3

@sodatea @mudin @davellanedam still not working for me.

{
"name": "vuetify-admin-dashboard",
"version": "1.0.0",
"engines": {
"node": "12.13.0"
},
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "npm run serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "node server.js"
},
"dependencies": {
"chartist": "0.11.0",
"core-js": "^3.6.0",
"eslint-plugin-vue": "^6.0.1",
"express": "^4.17.1",
"firebase": "^7.4.0",
"moment-timezone": "^0.5.27",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"serve-static": "^1.14.1",
"stripe": "^7.13.1",
"vue": "^2.5.17",
"vue-chartist": "^2.1.2",
"vue-meta": "^1.5.2",
"vue-moment": "^4.0.0",
"vuetify": "^1.2.5"
},
"devDependencies": {
"@mdi/font": "^2.5.94",
"@vue/cli-plugin-babel": "^3.0.1",
"@vue/cli-plugin-eslint": "^3.9.1",
"@vue/cli-service": "^3.0.1",
"@vue/eslint-config-standard": "^3.0.1",
"axios": "^0.17.1",
"eslint": "^6.8.0",
"eslint-loader": "2.1.2",
"material-design-icons-iconfont": "^3.0.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-analytics": "^5.8.0",
"vue-i18n": "^7.4.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0"
}
}

Can someone help please? Thanks.

Only this solution works:
//vue.config.js
module.exports = {
lintOnSave: false,
}

paul40322 picture paul40322 on 24 Dec 2019

It’s because you upgraded eslint to an incompatible version

sodatea picture sodatea on 24 Dec 2019

"@vue/cli-plugin-eslint": "^3.9.1", this one?

What version should it be then?

paul40322 picture paul40322 on 24 Dec 2019

Not the plugin. Eslint itself. out upraded it to 6.. Vue CLI 3. works with eslint 5.* Though

LinusBorg picture LinusBorg on 24 Dec 2019

I am getting the below:

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: ruleMapper is not a function

"dependencies": {
    "apollo-link-http": "^1.5.16",
    "apollo-link-ws": "^1.0.19",
    "apollo-utilities": "^1.3.3",
    "date-fns": "^1.30.1",
    "register-service-worker": "^1.6.2",
    "vee-validate": "^2.2.15",
    "vue": "^2.6.11",
    "vue-apollo": "^3.0.2",
    "vue-router": "^3.1.3",
    "vue-sweetalert2": "^1.6.4",
    "vue2-filters": "^0.4.1",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-regular-svg-icons": "^5.12.0",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-plugin-pwa": "^3.12.1",
    "@vue/cli-service": "^4.1.2",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.3",
    "graphql-tag": "^2.10.1",
    "jwt-decode": "^2.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^7.3.1",
    "vue-cli-plugin-apollo": "^0.19.2",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-template-compiler": "^2.6.11"
  },

Is this the same problem? Looks like my eslint is still a 5.* ?

crholliday picture crholliday on 31 Dec 2019

@crholliday I don't think it's the same problem.
Based on the error message, here's the only issue that I can find on the web: https://github.com/eslint/eslint/issues/11578 Maybe it's a installation problem.

sodatea picture sodatea on 31 Dec 2019

thank you!

petrovich-ivan picture petrovich-ivan on 5 Mar 2020

I have an issue such as below
Module Error (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
How can I solve this problem?
I wish your kind advice, thank you!

petrovich-ivan picture petrovich-ivan on 5 Mar 2020

@petrovich-ivan use "eslint": "^5"

ayZagen picture ayZagen on 5 Mar 2020

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?

LautaroVarela picture LautaroVarela on 18 May 2020

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

It's an optional file, so you'd create it yourself in the same folder as your package.json. Deets here:

https://cli.vuejs.org/config/#vue-config-js

richardtallent picture richardtallent on 18 May 2020

@maxql only works with yarn, not npm

For npm users it should just benpm i [email protected] right?

It was working for me with npm i eslint-loader. Thank you!!!!

alinaberlin picture alinaberlin on 26 Aug 2020

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?

it's work with me

eliasaparecido picture eliasaparecido on 6 Nov 2020

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',
  ],
rosnaib11 picture rosnaib11 on 19 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

DrSensor picture DrSensor  ·  3Comments
joshuajohnson814 picture joshuajohnson814  ·  3Comments
OmgImAlexis picture OmgImAlexis  ·  3Comments
wahidrahim picture wahidrahim  ·  3Comments
sanderswang picture sanderswang  ·  3Comments