Skip to content

Possible incompatibility with enableEslintLoader() and eslint-vue-plugin #473

@Kocal

Description

@Kocal

Hi, I am the frontend dev that was blaming webpack-encore one year ago 👀

First, let me congratulate you @weaverryan and the community, webpack-encore seems has become very mature over time. It's nice to have webpack 4, Babel 7 and ESLint working out of the box.

Even if I still prefer using vue-cli for a SPA (with Symfony as API) or a raw simple webpack config for smaller project, webpack-encore is really a must have for more oriented Symfony projects.


So I'm facing an issue with using the ESLint loader with eslint-plugin-vue for linting .vue files.

This is how I configure the eslint-loader:

Encore.enableEslintLoader(config => {
  config.configFile = __dirname + '/.eslintrc';
});

This is my .eslintrc:

{
  "extends": [
    "airbnb-base",
    "plugin:vue/recommended",
    "@yproximite/base"
  ],
  "rules": {
      ...
   }
}

And this is my ESLint dependencies:

❱Development❰ [email protected]:/srv/app|⇒  yarn list --pattern eslint  
yarn list v1.12.3
├─ @yproximite/[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]
├─ [email protected]
├─ [email protected]
└─ [email protected]

And this is what happens when running webpack-encore:

selection_007

This is a webpack-encore issue because everything is fine when running ESLint manually:

selection_008

I followed the link What is the "Use the latest vue-eslint-parser" error?, and it's a problem of ESLint parser configuration.

We should do this to fix the problem:

- "parser": "babel-eslint",
  "parserOptions": {
+     "parser": "babel-eslint",
      "ecmaVersion": 2017,
      "sourceType": "module"
  }

But the parser options is hardcoded in loaders/eslint.js:
selection_009

So I updated my code and tried this:

Encore.enableEslintLoader(config => {
  config.configFile = __dirname + '/.eslintrc';
  delete config.parser;
});
Screenshot

selection_010

or even this:

Encore.enableEslintLoader(config => {
  config.configFile = __dirname + '/.eslintrc';
  config.parserOptions = Object.assign({}, config.parserOptions || {}, {
    parser: 'babel-eslint'
  });
  delete config.parser;
});
Screenshot

selection_011

I have no more eslint-loader errors, but eslint-loader seems to not be working anymore 🤷‍♂️

Does someone already faced this issue?
I will do more investigation and see if I can help more.

Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions