[Bug]: parserOptions.ecmaFeatures.jsx not set when using presets

[CleyFaye]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

When extending eslint configuration with "extends": ["plugin:react/recommended"], the parserOptions are not set to enable JSX support.

According to the README, parserOptions.ecmaFeatures.jsx should be set to true by all presets.

% cat .eslintrc.cjs
module.exports = {
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  },
  extends: [
    "eslint:recommended",
    "plugin:react/all"
  ],
  settings: {
    react: {
      version: "detect"
    }
  }
}

% npx eslint --print-config somefile.js | jq .parserOptions
{
  "ecmaVersion": "latest",
  "sourceType": "module"
}

This property not being set breaks parsing of JavaScript files containing JSX.

Expected Behavior

According to the documentation:

Note: These configurations will import eslint-plugin-react and enable JSX in parser options.

But using the presets (all and recommended) do not set this property.

It used to work in v7.31.11 but is broken in v7.32.1, which is actually tagged "latest" on npmjs.

With v7.31.11, the example in the overview above yields this result:

% npx eslint --print-config somefile.js | jq .parserOptions
{
  "ecmaVersion": "latest",
  "sourceType": "module",
  "ecmaFeatures": {
    "jsx": true
  }
}

and eslint works fine with files containing JSX.

eslint-plugin-react version

v7.32.1

eslint version

v8.32.0

node version

v18.13.0

[ljharb]

I would suggest using the airbnb config, instead of the "recommended" config (which isn't actually recommended, because it's very out of date due to semver constraints).

[ljharb]

That said, it's currently set here: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/configs/all.js#L29-L35 for the flat config, so we should also be setting it for the legacy config, assuming the flat config won't error on it.

[lkraav]

7.34.0: somehow this flat config only applies languageOptions.parserOptions.ecmaFeatures.jsx as a standalone config object, but not when spreading inside another. Is this a bug or a feature?

// @see https://eslint.org/docs/latest/use/configure/migration-guide#predefined-and-shareable-configs
import js from "@eslint/js";
import reactRecommended from "eslint-plugin-react/configs/recommended.js";

export default [
  js.configs.recommended,
  // reactRecommended, // `languageOptions.parserOptions.ecmaFeatures.jsx` is set, but I don't want it as a global config objet?
  {
    files: ["apps/admin/**/*.{js,jsx}"],
    ...reactRecommended, // `languageOptions.parserOptions.ecmaFeatures.jsx` is missing.
  },
];

[ljharb]

That's likely because languageOptions is non-enumerable, so it won't spread.

[lkraav]

That's likely because languageOptions is non-enumerable, so it won't spread.

Yeah I suspected this being related after inspecting the code.

For a new person, this distinction might be a bit confusing, because

eslint-plugin-react/README.md

Lines 231 to 255 in 2e6b557

	You can of course add/override some properties.
	**Note**: Our shareable configs does not preconfigure `files` or [`languageOptions.globals`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).
	For most of the cases, you probably want to configure some properties by yourself.
	```js
	const reactRecommended = require('eslint-plugin-react/configs/recommended');
	const globals = require('globals');
	module.exports = [
	…
	{
	files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
	...reactRecommended,
	languageOptions: {
	...reactRecommended.languageOptions,
	globals: {
	...globals.serviceworker,
	...globals.browser,
	},
	},
	},
	…
	];
	```

doesn't really say it will be mandatory to also spread languageOptions manually to get jsx parsed.

"You probably want to" doesn't sound like "You really have to".

[ljharb]

That's true. I think long term we need separate entry points for flat config, and until we have those, this plugin should only be used with flat config in concert with eslint's flat compat wrapper.