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 eslint-loader@2.2.0 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 eslint-loader@2.1.2

[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 eslint-loader@2.1.2 right?

[pasqualevitiello]

@maxql only works with yarn, not npm

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

Yes, that's for npm.