Babel-eslint: Information: V11 stop loading .babelrc file

[jimblue]

My .eslintrc and .babelrc are in the same folder.

But after upgrading to V11, I had the babel config not found problem.
I've read about this issue in the doc and #738, so as suggested I've manually define the babel config file path:

"parserOptions": {
    "babelOptions": {
      "configFile": ".babelrc"
    }
  }

I've first try with a relative path because it make more sens. But it didn't work.
So I've try with the absolute path of the babel config file:

"parserOptions": {
    "babelOptions": {
      "configFile": "/Users/jim/Repositories/websites/jmbnew/site/themes/nature/.babelrc"
    }
  }

Now it's working, but honestly, this is really confusing...

Why it's now needed to define the babel config file path and why it need to be an absolute path?

I mean using .eslintrc and .babelrc is the default and recommended configuration, so it should be working out of the box, don't you think?

BTW, define Babel config file path doesn't seems to be recommended by Babel team in this case: https://babeljs.io/docs/en/options#configfile

Thanks for your help

Cheers

[WangJiangJiaoZi]

My version is 11.0.0-beta-0, and I did not encounter the problem you mentioned. Set parser

parser: 'babel-eslint'

[jimblue]

I already did, here is my complete eslintrc:

{
  "root": true,
  "extends": ["standard", "plugin:compat/recommended", "plugin:import/errors", "plugin:import/warnings", "plugin:promise/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
    "allowImportExportEverywhere": true,
    "babelOptions": {
      "configFile": "/Users/jim/Repositories/websites/jmbnew/site/themes/nature/.babelrc"
    }
  },
  "env": {
    "commonjs": true,
    "browser": true,
    "es6": true
  },
  "globals": {
    "WEBPACKER_DEV": true,
    "WEBPACKER_PROD": true
  },
  "settings": {
    "polyfills": ["Promise", "IntersectionObserver", "URLSearchParams"]
  }
}

[WangJiangJiaoZi]

By default. eslint-babel will automatically read .babelrc

[jimblue]

By default. eslint-babel will automatically read .babelrc

This is exactly why I've open this issue... @WangJiangJiaoZi, please read my first post attentively!

[kaicataldo]

You mention that your .babelrc and .eslintrc files are in the same directory. Is that the root directory? Also, it would be great if you could share what version of Node, npm, babel, and eslint you're using.

[jimblue]

Hi @kaicataldo !

I'm using:

• Node v10.15.1
• npm v6.9.0
• @babel/core v7.4.5
• babel-loader v8.0.6
• babel-eslint v11.0.0-beta.0

And .babelrc and .eslintrc are in the same directory, which is the root of my theme but not of the project. Here is a screenshot so you can see the file tree:

[kaicataldo]

Great, thanks for sharing that. Is the error you're seeing being shown by VS Code's ESLint plugin or on the command line? If it's showing up in VS Code, it might be because VS Code is running ESLint from whatever the root directory of the project is (the top level directory in the file tree view). Because babel-eslint v11 is using @babel/core's config resolution logic, if it was being run from the root directory it wouldn't be able to find the .babelrc file.

If you haven't tried yet, can you run ESLint from the CLI in the Node package root where the ESLint and Babel config files are located (themes/nature/) and see if the problem persists?

[jimblue]

Hi @kaicataldo, thanks for your message 😄 !

This error came with V11, before it was perfectly working.

I've always run webpack from site/themes/nature folder, where all my config files are located. (webpack use eslint-loader)

And in the end the error happens both in VS Code and node... 😞

problems tab of vscode:

terminal tab of vscode:

Thank you for helping me 😄 !

[kaicataldo]

No problem. In the first screenshot, it looks like the case I mentioned above is happening (it's running ESLint from the project root rather than the package root). In the second case, it looks like you're running ESLint on site/themes/nature/node_modules, and that's what's causing the issue. Does that error still occur if you add node_modules to your .eslintrc? Also, just to confirm, you're running ESLint from the command line in site/themes/nature, correct?

Going forward, can we try to debug this only from the command line? It'll be easier to debug without the added variables of VS Code and its ESLint plugin.

[jimblue]

The fact is I didn't change anything but upgrading babel-eslint to v11...
So why it was working before and it doesnt' now... I don't get why I have to modify the config... 😭

Also, just to confirm, you're running ESLint from the command line in site/themes/nature, correct?

_I'm running webpack from the command line which run eslint with babel-eslint._

In the second case, it looks like you're running ESLint on site/themes/nature/node_modules, and that's what's causing the issue. Does that error still occur if you add node_modules to your .eslintrc?

_Sorry I don't get what you mean... where should I add node_modules in .eslintrc?_

I'll would be happy to debug this from the command line, but I have no idea how to do it...
Any hint?? 😄

[kaicataldo]

v11 changes babel-eslint to parse your code using the same configuration you use whenever Babel itself runs. This means it needs to be able to resolve your config just like Babel does (it actually requires Babel as a peer dependency and uses its internal config resolution to do so).

Previous to this version, babel-eslint had all the parser plugins hard coded in the source code, which resulted in them getting out of sync with the latest syntax available in Babel core as well as the parser allowing different syntax when parsing for ESLint vs parsing for Babel.

It’s hard to tell what’s going on in your case without answers to the questions in my last response.

All that being said, if you have nested Node packages within your project repo and you’re not running ESLint from that directory, using babelOptions.configFile does seem like the answer here!

[jimblue]

Hey @kaicataldo, thank you for all those precisions, seems more clear to me 😄.

Also I did answer to your questions on my last message. You maybe missed it because my answer was include in the quote. I've correct it should be more clear now.

Let me know if you need more info to understand what's happening on my side!

[nicolo-ribaudo]

@jimblue Are you able to create a smaller repository with the same structure which reproduces the problem?

[jimblue]

Yes sure I think I can do that. Just give a few days because I'm away until sunday 😄

[kaicataldo]

Thanks - sorry I missed it. A smaller repro case would be really helpful here. Now knowing that you’re running ESLint as a loader in Webpack, that adds some more complexity.

[jimblue]

Hey,

After searching a lot I finally found that the error was only happening because of VScode eslint extension wasn't properly supporting eslint v6.

But great news, there is a fix!! In VScode settings you must define eslint working directory like so:

{
    "eslint.workingDirectories": [
        {
        "directory" : "path/to/the/root/of/your/project",
            "changeProcessCWD": true
        }
    ]
}

That's it! :)

Thank for your help @kaicataldo