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

[lbicknese]

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.

[zopu]

Seeing the same issue here.

[cgcgbcbc]

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

[luisacatherine]

same issue here

[TGilany]

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

[alessandrotesoro]

Same here.

[ikitozen]

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

Looks like a eslint-loader 2.2.0 issue
webpack-contrib/eslint-loader@b6c3938

[maxql]

As @ikitozen mentioned

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

in package.json seems to do the trick.

[rdhelms]

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.

webpack-contrib/eslint-loader@b6c3938#diff-168726dbe96b3ce427e7fedce31bb0bcR167

[rdhelms]

And [email protected] was published a couple hours ago

[alessandrotesoro]

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

[lifanmvc]

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

[gerenook]

@maxql only works with yarn, not npm

[maxql]

@maxql only works with yarn, not npm

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

[pasqualevitiello]

@maxql only works with yarn, not npm

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

Yes, that's for npm.

[donley828]

Same here.

[purplelady105]

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

[m-ahmadi]

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

> [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.

[luxwarp]

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

[tsathis]

not fixed by npm i [email protected]

[richardtallent]

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.

[LinusBorg]

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.

[crholliday]

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.* ?

[haoqunjiang]

@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: eslint/eslint#11578 Maybe it's a installation problem.

[petrovich-ivan]

thank you!

[petrovich-ivan]

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!

[ayZagen]

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

[LautaroVarela]

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?

[richardtallent]

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

[alinaberlin]

@maxql only works with yarn, not npm

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

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

[eliasaparecido]

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

[bsor-dev]

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',
  ],

[aManNamedJed]

This was the only thing that worked for me:

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

[soobing]

After upgrade node version to v14.17.5(current LTS), problem solved 😱 ...
My last node version was v12.

[KennethicEnergy]

Run this command to fix the issue:
export NODE_OPTIONS=--openssl-legacy-provider