[react] @babel/eslint-parser expects presence of babel.config.js about eslint-config-galex HOT 14 CLOSED

It works beautifully, thank you so much!

from eslint-config-galex.

The error comes from linting .eslintrc.js itself, which your command skips (eslint src), but it also concerns any other JS file.

from eslint-config-galex.

🚀 🚀 🚀

from eslint-config-galex.

I'm struggling to make the config work in a basic CRA project without TypeScript.

If I install babel-preset-react-app and add a .babelrc file, as mentioned above, I get the following ESLint errors (both in VSCode and when running ESLint manually):

Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables.

Unfortunately, setting NODE_ENV before running ESLint manually, or in the config of my IDE's ESLint extension doesn't resolve the error.

If I install typescript and add a jsconfig.json file with the following content:

{
  "compilerOptions": {
    "baseUrl": "src",
    "checkJs": true
  }
}

... I get a warning about not having a tsconfig.json file, and ESLint shows errors every time it sees JSX in my JS files. If I rename the file to tsconfig.json, I still get the same errors (but the warning is gone).

eslint-config-galex just doesn't seem to like linting .js files with JSX in them. 😅 Am I doing something wrong?

from eslint-config-galex.

hmm technically that should work since https://github.com/ljosberinn/eslint-config-galex/blob/master/src/overrides/react.js#L13 jsx as ending is optional. If it doesn't like JSX in JS files it sounds more like it can't detect react as present dependency which it should because... CRA projects have react in their package.json, right?

I'll take a look - this is basically when doing:

npx create-react-app@latest demo
cd demo
npm i --save-dev eslint eslint-config-galex

?

from eslint-config-galex.

Yes, indeed, they have react in their package.json.

Here are the exact repro steps:

1. Run:

npx create-react-app@latest demo
cd demo
yarn add -D eslint eslint-config-galex

2. Add .eslintrc with { "extends": "galex" }
3. Remove "eslint" config from package.json
4. Add script to package.json: "lint": "eslint \"**/*.js\""
5. Run yarn lint

The few JS files bootstraped by CRA all give the following error:

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (6:4)

It's very strange indeed.

from eslint-config-galex.

Here is what the React override looks like when I call createConfig() in .eslintrc.js:

It looks exactly the same as in another CRA project of mine with TS files and where everything works fine. I've tested the glob '**/*.?(ts|js)?(x)' and it does seem to match JS files, so I really don't get it. 🤷

from eslint-config-galex.

Can confirm this error so far:

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (6:4)

however, using createConfig crashes for me with Error: Failed to load parser '@babel/eslint-parser' declared in '.eslintrc.js#overrides[0]': Cannot find module '@babel/eslint-parser'.

Working on it.

from eslint-config-galex.

Found a solution, publishing fix soon!

from eslint-config-galex.

🎉 This issue has been resolved in version 2.16.10 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

from eslint-config-galex.

Arf, I've updated the config in another CRA project, this time with TypeScript, and now I get the env var error on .eslintrc.js 😂

Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined.

Seems like the file is now being processed with the Babel parser instead of the TypeScript parser, or something of the sort.

from eslint-config-galex.

Afraid I can't confirm this one, got a repro? I just ran:

npx create-react-app@latest demo-eslint --template typescript
cd demo-eslint
yarn add -D eslint eslint-config-galex
touch .eslintrc.js

// .eslintrc.js
const { createConfig } = require('eslint-config-galex/src/createConfig');

module.exports = createConfig();

then this works just fine, even without installing the mentioned dependencies in the docs:

from eslint-config-galex.

Ah, that explains it!

from eslint-config-galex.

🎉 This issue has been resolved in version 2.16.11 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

from eslint-config-galex.