Flat Config False Positiv "Parsing error: Unexpected token ."

[georgiossalon]

In the newest version of eslint v9 I added the package pluginReact.configs.flat.recommended in the eslint.config.mjs file. All of a sudden I am getting in multiple files the error message "Parsing error: Unexpected token ." in places like result?.data.

Moving the plugin down or up the order didnt seem to solve the problem. If I comment it out, the error dissapears.

This is how my eslint.config.mjs looks like

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import eslintConfigPrettier from "eslint-config-prettier";
import pluginCypress from 'eslint-plugin-cypress/flat'


export default [
  pluginCypress.configs.recommended,
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  eslintConfigPrettier,
  {
    settings: {
      react: {
        version: "detect"
      }
    },
    rules: {
      "react/react-in-jsx-scope": 0,
      "no-unused-vars": 1,
      "react/prop-types": 0,
      "react/function-component-definition": [2, {"namedComponents": "arrow-function"}],
      "react/destructuring-assignment": 1,
      'cypress/no-unnecessary-waiting': 'off'
    }
  }
];

and the packages in the package.json

"eslint-plugin-cypress": "^3.5.0",
"eslint-plugin-react": "^7.35.0",
"eslint-config-prettier": "^9.1.0",
"eslint": "^9.9.0",
"@eslint/js": "^9.9.0",

[MikeMcC399]

@georgiossalon

You are describing an issue with eslint-plugin-react however you have posted into the issue list of eslint-plugin-cypress.

If you believe this is a bug in eslint-plugin-cypress please post an example of failing code.

The ESLint organization also hosts a Discord server where you can ask for help.

[georgiossalon]

@MikeMcC399

Stackblitz Sandbox: https://stackblitz.com/edit/vitejs-vite-fxcsit?file=vite.config.js

The error seems to occur when in vite.config.js there is also the eslint plugin inserted. So the error comes from vite-plugin-eslint and not from eslint-plugin-react. This though occurs only, when the eslint-plugin-cypress is utilized.

[MikeMcC399]

@georgiossalon

If you are finding that plugins do not work correctly together, you might consider using alternate ESLint config files with the ESLint CLI -c --config option, defining a subset which does work together.

For complex use-case problems, the Discord server as mentioned above is probably the best address.

[MikeMcC399]

@georgiossalon

Your Stackblitz shows you are using ES2020 optional chaining syntax outside of Cypress test specs, and I suspect this is what is causing your issue since pluginCypress.configs.recommended, which you are using, selects ecmaVersion: 2019. This version was carried over from the legacy configuration for backwards compatibility.

eslint-plugin-cypress/lib/flat.js

Lines 30 to 33 in 1765fa9

	const commonLanguageOptions = {
	ecmaVersion: 2019,
	sourceType: 'module'
	}

This is mentioned in the documentation FLAT-CONFIG > Usage examples.

Your App.jsx

import { useState } from 'react';
import './App.css';

const fruit = ['apples', 'oranges', 'pinapple'];

function App() {
  const [selected] = useState(fruit);

  return (
    <>
      {selected?.map((item) => (
        <div key={item}>{item} !</div>
      ))}
    </>
  );
}

export default App;

[MikeMcC399]

• See also discussion in Drop or change hard-coded ecmaVersion #215

[MikeMcC399]

@georgiossalon

Please try changing your example to specify ecmaVersion: 'latest' and move it below pluginCypress.configs.recommended.

import globals from 'globals';
import pluginJs from '@eslint/js';
import pluginReact from 'eslint-plugin-react';
import pluginCypress from 'eslint-plugin-cypress/flat';

export default [
  { files: ['**/*.{js,mjs,cjs,jsx}'] },
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  pluginCypress.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 'latest',
      globals: globals.browser,
    },
  },
  {
    settings: {
      react: {
        version: 'detect',
      },
    },
    rules: {
      'react/react-in-jsx-scope': 0,
      'react/prop-types': 0,
    },
  },
];

[MikeMcC399]

Closing, since this was a configuration issue and there has not been any further feedback.

[georgiossalon]

Worked like a charm, thank you :) I thought that the option ecmaVersion: 'latest' was set like this by default.

[MikeMcC399]

@georgiossalon

Worked like a charm, thank you :) I thought that the option ecmaVersion: 'latest' was set like this by default.

It's good to hear it worked well!

You're right that the default for ESLint 9 is ecmaVersion: 'latest' see
https://eslint.org/docs/latest/use/configure/language-options#specifying-javascript-options

however in the case of eslint-plugin-cypress@3 it is fixed at ecmaVersion: 2019
https://github.com/cypress-io/eslint-plugin-cypress/blob/master/FLAT-CONFIG.md#usage-examples which overrides the default.

I expect this to change with the next major version release.

[Jikodis]

Adding cypressPlugin.configs.recommended to my existing flat config started throwing linting errors in my code since I use optional chaining as well. I agree with the decision in this issue to remove ecmaVersion in the flat config: #215

[MikeMcC399]

I expect this to change with the next major version release.

[email protected] is now released which includes the change

languageOptions ecmaVersion: 2019 and sourceType: module are removed from eslint-plugin-cypress/flat config