Babel-eslint: This experimental syntax requires enabling the parser plugin: xxxxx

[titouancreach]

Since the documentation: "babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint."
In theory, a code that works with babel should work with "babel-eslint".

I try to use 3 experimental plugins in my code:

• "@babel/plugin-proposal-nullish-coalescing-operator"
• "@babel/plugin-proposal-pipeline-operator"
• "@babel/plugin-proposal-optional-chaining"

And I made a test file to test these 3 plugins:

const o = { a: { } };

// chaining
console.log(o?.a);
console.log(o?.a?.b);
console.log(o?.a?.b ?? 'should be printed');
o |> console.log;

If I compile this file with babel-cli, I've:

var _o$a, _o;

const o = {
  a: {}
}; // chaining

console.log(o === null || o === void 0 ? void 0 : o.a);
console.log(o === null || o === void 0 ? void 0 : (_o$a = o.a) === null || _o$a === void 0 ? void 0 : _o$a.b); //console.log(o?.a?.b ?? 'should be printed');

_o = o, console.log(_o);

That's look OK at first glance.

When I try to lint this file I have:

 error  Parsing error: This experimental syntax requires enabling the parser plugin: 'nullishCoalescingOperator'
error  Parsing error: This experimental syntax requires enabling the parser plugin: 'pipelineOperator'

But nothing from @babel/plugin-proposal-nullish-coalescing-operator.

The plugins are enabled on the .babelrc:

{
  "presets": [["@babel/env", {
    "targets": {
      "browsers": ["last 2 Chrome versions"]
    }
  }], "@babel/flow", "@babel/stage-0"],

  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-pipeline-operator",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

Here is the version of relevant package:

    "@babel/core": "^7.0.0-beta.32",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-beta.32",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.32",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0-beta.32",
    "@babel/preset-env": "^7.0.0-beta.32",
    "@babel/preset-flow": "^7.0.0-beta.32",
    "@babel/preset-stage-0": "^7.0.0-beta.32",
    "@babel/cli": "^7.0.0-beta.32,
    "eslint": "^4.11.0",
    "babel-eslint": "^8.0.2",

And the relevant part of my .eslintrc.js

module.exports = {

  plugins: [
    'vue'
  ],

  extends: [
    'eslint-config-airbnb/legacy',
    'plugin:vue/recommended'
  ],

  env: {
    es6: true
  },

  parserOptions: {
    parser: 'babel-eslint',
  },

  rules: {
   ...
  },

  globals: {
    ...
  }
};

I don't understand why babel can transpile and not lint since the parser is babel-eslint.
Is it a bug or do I missed something ?

Thanks

[nicolo-ribaudo]

It has been fixed in https://github.com/babel/babel-eslint/commit/c66ec51878e43d05d01fa8151525654cd35eb094. (babel-eslint 8)

Which version of babel-eslint are you using?

[titouancreach]

The one that is in my package.json I guess so "babel-eslint": "^8.0.2".

[nicolo-ribaudo]

Oh sorry, I was wrong.
The correct way of fixing this bug is adding the missing Babylon plugins to https://github.com/babel/babel-eslint/blob/a0fbd503d89fbaddca0aea0bcd277812df17a97d/index.js#L395-L418. There is already a PR for the pipeline operator (https://github.com/babel/babel-eslint/pull/540); do you want add the nullishCoaleshingOperator to that list?

[titouancreach]

Sure! I'll do a PR a soon as possible ! thanks

[titouancreach]

https://github.com/babel/babel-eslint/pull/544

[yashshah]

I'm also facing this issue, is this any way to solve this yet?

[szeller]

For anyone else encountering the issue, you should check your eslintrc and verify that you've got

  parser: 'babel-eslint',

as one of the top level options. Based on the eslint documentation, the eslintrc in the original description of @titouancreach won't work.

[titouancreach]

I wished to use : https://github.com/vuejs/eslint-plugin-vue. The F.A.Q state:

If you already use other parser (e.g. "parser": "babel-eslint"), please move it into parserOptions, so it doesn't collide with the vue-eslint-parser used by this plugin's configuration:

[szeller]

Ah, thanks for the info. It might be worth trying to lint at least one of the files that has errors currently with just babel-eslint directly to determine if the issue is with babel-eslint or with the vue plugin.

[titouancreach]

This bug still occurs with:

  parser: 'babel-eslint',


  /*
  parserOptions: {
    parser: 'babel-eslint'
  },
  */

I use the same file as above.

[zdychacek]

Would't be more flexible solution to move plugins option for babylon parser instance into parserOptions option in .eslintrc file?

Now every new plugin requires code change and publishing it under new version.

[hzoo]

@zdychacek yeah something like that could work and i think that is what https://github.com/babel/babel-eslint/pull/523 is?

I think we should probably just look into reading babelrc and querying the plugins from that (make a babel-core method to do it)

https://github.com/babel/babel-eslint/pull/523 should fix the plugins in the meanwhile (next release)

[sartaj]

@hzoo It seems like #523 is currently in flux.

Do you or anyone know of any other fix to get these features to work? I wasn't able to get any of the solutions in this thread to work in a simple setup (non vue). I'm specifically looking for the pipeline-operator.

[flipactual]

I'm seeing Parsing error: This experimental syntax requires enabling the parser plugin: 'pipelineOperator' with [email protected] and SyntaxError: Unexpected token with [email protected]

@babel/[email protected] has no problem compiling the code

Is there something we can do right now to enable feature support in babel-eslint?

Are there tickets we should be tracking?

(Hey @sartaj! 👋)

---

Oops, sorry

[email protected] is working great – my issue became prettier

Thank you 👋

[Hypnosphi]

logicalAssignment is still missing

[finom]

partialApplication 🙏

[finom]

It would be better to provide a way to customize the list of plugins (or even all babel parser options).

[valoricDe]

@finom v11 loads your babel.config.js and parses out all plugins
My .eslintrc.js looks now like this:

module.exports = {
  parser: 'babel-eslint',
  plugins: ['babel', 'security', 'node', 'jest', 'cypress'],
  extends: [
    'plugin:security/recommended',
    'airbnb-base',
    'prettier',
    'prettier/react',
    'prettier/babel',
  ],
...

Because you also need the eslint-plugin-babel and if you use prettier the babel config for it:
https://github.com/babel/eslint-plugin-babel
https://github.com/prettier/eslint-config-prettier

[finom]

@valoricDe to enable some of the plugins babel needs to know what and how to parse. See https://babeljs.io/docs/en/babel-parser
Plugins don't enable any parsing features. The only thing they do is compiling JS code into JS code.

[valoricDe]

@finom I resolved my partialApplication problem with version 11 of babel-eslint and the aforementionend .eslintrc. Because it reads your babel.config.js so it knows what and how to parse. Just try it out.

[kaicataldo]

@valoricDe is correct - v11 reads your Babel config file and enables parser plugins using the same logic Babel itself does when compiling.

[finom]

Good to know, TY 🎉

[willin]

same error. partialApplication

.babelrc.js:

module.exports = {
  presets: ['@babel/env', '@babel/typescript'],
  plugins: [
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }]
  ]
};

.eslintrc.yml:

root: true
parser: babel-eslint
extends:
  - '@shiwangme'
  - plugin:@typescript-eslint/recommended-requiring-type-checking
plugins:
  - babel
parserOptions:
  project: ./tsconfig.json

packs:

    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.7.4",
    "@babel/plugin-proposal-pipeline-operator": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-typescript": "^7.7.4",
    "@shiwangme/eslint-config": "*",
    "@types/node": "*",
    "babel-eslint": "^11.0.0-beta.1",
    "eslint": "*",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "*",
    "prettier": "*",
    "typescript": "*"

source.ts:

let person = { score: 25 };

let newScore = person.score
  |> double
  |> add(7, ?)
  |> boundScore(0, 100, ?);

Error:

Parsing error: /xxx/src/index.ts: Support for the experimental syntax 'partialApplication' isn't currently enabled (5:13):

  3 | let newScore = person.score
  4 |   |> double
> 5 |   |> add(7, ?)
    |             ^
  6 |   |> boundScore(0, 100, ?);
  7 |