Declaring babel plugins for @babel/eslint-parser in .eslintrc

Question

I've been trying for a while now to get @babel/plugin-proposal-class-properties plugin to work nicely with @babel/eslint-parser and eslint without success.

This is my .eslintrc.js :

...
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 11,
    "requireConfigFile": false,
  },
  "plugins": [
    "@babel",
  ],
...

And these are the related installed packages:

+-- @babel/core@7.11.1
+-- @babel/eslint-parser@7.11.3
+-- @babel/eslint-plugin@7.11.3
+-- @babel/plugin-proposal-class-properties@7.10.4
+-- eslint@7.7.0

---

Under this configuration, ESLint errors with this message:

Parsing error: \eg\example.js: Support for the experimental syntax 'classPrivateProperties' isn't currently enabled (xx:yy): (Fatal)

But if I add @babel/plugin-proposal-class-properties to plugins in .eslintrc.js like this:

  "plugins": [
    "@babel",
    "@babel/plugin-proposal-class-properties",
  ],

I get this error:

Error while running ESLint: Failed to load plugin '@babel/plugin-proposal-class-properties' declared in '.eslintrc.js': Cannot find module '@babel/eslint-plugin-plugin-proposal-class-properties'.

---

It seems like this isn't the correct way to declare plugins for @babel/eslint-parser in .eslintrc.js . Still, I suspect it is possible due to this quote here :

@babel/eslint-parser also supports applying Babel configuration through your ESLint configuration.

So my question is:

Is it actually possible to declare babel plugins in .eslintrc ? If so how exactly?

Answer 1

It's actually simpler than I thought...

So it turns out that since @babel/plugin-proposal-class-properties is a babel plugin, it needs to be declared in the plugins property of babel's configuration. According to the documentation of @babel/eslint-parser , those can be passed in with babelOptions property.

Therefore it's really as simple as this:

...
  "parserOptions": {
    ...
    "babelOptions": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ...
      ],
    },
  },
  "plugins": [
    "@babel",
  ],
...

Answer 2

When using @babel/eslint-parser as eslintrc parser , I met this question too.

Just like this question .

For example, the eslintrc used by eslint node api in a global cli, and the cli provide a command A .

After go to the directory B , executing command A .The process.cwd() is B directory, but the @babel/xxx deps is in cli node_modules.The babel/core can not find plugins in B .

Parsing error: Cannot find module '@babel/plugin-proposal-decorators'\nRequire stack:
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/config/files/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/worker/babel-core.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/worker/handle-message.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/client.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/index.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@eslint/eslintrc/lib/config-array-factory.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@eslint/eslintrc/lib/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/cli-engine/cli-engine.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/cli-engine/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/api.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/test-a-es-checker/dist/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/dist/index.js

I resolved it by provide cwd for babelOption in eslintrc.

module.exports = {
  ...
  parser: '@babel/eslint-parser',
  babelOptions: {
    cwd: __dirname, // The working directory that all paths in the programmatic options will be resolved relative to.
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
    ],
  },
  ...
};