Default configuration fails to parse optional chaining operator

[ioev]

Hopefully an easy question, but I'm struggling to figure out why this is happening. With a default generated configuration, I run npx eslint useRoles.js and receive a parse error for the period in an optional chaining operator:

/path/to/file.js
  18:22  error  Parsing error: Unexpected token .

✖ 1 problem (1 error, 0 warnings)

From what I can tell, it's from one of the configs.base.recommended that specify a parserOptions.ecmaVersion:

  'airbnb/config/es6', // 6
  'airbnb/config/import-x', // 2018
  'airbnb/config/base-configurations', // 2018

The failure goes away if I filter these out

My .browserlistrc is defaults, but I'm guessing this isn't being considered here?

The config being used is:

/**
 * THIS FILE WAS AUTO-GENERATED.
 * PLEASE DO NOT EDIT IT MANUALLY.
 * ===============================
 * IF YOU COPY THIS INTO AN ESLINT CONFIG, REMOVE THIS COMMENT BLOCK.
 */

import path from 'node:path';

import { includeIgnoreFile } from '@eslint/compat';
import js from '@eslint/js';
import { defineConfig } from 'eslint/config';
import { configs, plugins } from 'eslint-config-airbnb-extended';
import { rules as prettierConfigRules } from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';

const gitignorePath = path.resolve('.', '.gitignore');

const jsConfig = defineConfig([
  // ESLint recommended config
  {
    name: 'js/config',
    ...js.configs.recommended,
  },
  // Stylistic plugin
  plugins.stylistic,
  // Import X plugin
  plugins.importX,
  // Airbnb base recommended config
  ...configs.base.recommended,
]);

const reactConfig = defineConfig([
  // React plugin
  plugins.react,
  // React hooks plugin
  plugins.reactHooks,
  // React JSX A11y plugin
  plugins.reactA11y,
  // Airbnb React recommended config
  ...configs.react.recommended,
]);

const prettierConfig = defineConfig([
  // Prettier plugin
  {
    name: 'prettier/plugin/config',
    plugins: {
      prettier: prettierPlugin,
    },
  },
  // Prettier config
  {
    name: 'prettier/config',
    rules: {
      ...prettierConfigRules,
      'prettier/prettier': 'error',
    },
  },
]);

export default defineConfig([
  // Ignore files and folders listed in .gitignore
  includeIgnoreFile(gitignorePath),
  // JavaScript config
  ...jsConfig,
  // React config
  ...reactConfig,
  // Prettier config
  ...prettierConfig,
]);

[NishargShah]

Can you send me that sample userRoles.js file which fails to lint.

[ioev]

Sure thing:

import { gql, useQuery } from '@apollo/client';
import keyBy from 'lodash/keyBy';

const RolesQuery = gql`
  ...
`;

const useRoles = () => {
  const { data, ...query } = useQuery(RolesQuery);
  const roles = data?.roles || [];  // this line, the period before the ?
...