TypeError: Failed to load plugin 'jsx-a11y' declared in '.eslintrc': Invalid attempt to spread non-iterable instance.

[m-nathani]

Getting the follwowing error after installing eslint v8.20.0. not sure what causing break as it was working fine with eslint v8.17.0 before.

Oops! Something went wrong! :(

ESLint: 8.20.0

TypeError: Failed to load plugin 'jsx-a11y' declared in '.eslintrc » @umai/eslint-config': Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
Referenced from: /home/murtaza/umai/webrms/node_modules/@umai/eslint-config/index.js
    at _nonIterableSpread (/home/murtaza/umai/webrms/node_modules/@babel/runtime/helpers/nonIterableSpread.js:2:9)
    at _toConsumableArray (/home/murtaza/umai/webrms/node_modules/@babel/runtime/helpers/toConsumableArray.js:10:95)
    at Object.<anonymous> (/home/murtaza/umai/webrms/node_modules/eslint-plugin-jsx-a11y/lib/util/isInteractiveElement.js:24:61)
    at Module._compile (/home/murtaza/umai/webrms/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (/home/murtaza/umai/webrms/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/murtaza/umai/webrms/node_modules/eslint-plugin-jsx-a11y/lib/rules/aria-activedescendant-has-tabindex.js:22:52)
husky - pre-commit hook exited with code 1 (error)

here is the my eslint npm package trace

murtaza@murtaza-desktop:~/umai/webrms$ npm ls eslint
webrms@130.0.0 /home/murtaza/umai/webrms
├─┬ @umai/craco-plugin-micro-frontend@52.0.0
│ └─┬ react-scripts@5.0.1
│   ├─┬ eslint-webpack-plugin@3.2.0
│   │ └── eslint@8.20.0 deduped
│   ├── eslint@8.20.0 deduped
│   └─┬ react-dev-utils@12.0.1
│     └─┬ fork-ts-checker-webpack-plugin@6.5.2
│       └── eslint@8.20.0 deduped
└─┬ @umai/eslint-config@27.0.0
  ├─┬ eslint-config-airbnb@19.0.4
  │ ├─┬ eslint-config-airbnb-base@15.0.0
  │ │ └── eslint@8.20.0 deduped
  │ ├─┬ eslint-plugin-import@2.26.0
  │ │ └── eslint@8.20.0 deduped
  │ ├─┬ eslint-plugin-react-hooks@4.6.0
  │ │ └── eslint@8.20.0 deduped
  │ ├─┬ eslint-plugin-react@7.30.1
  │ │ └── eslint@8.20.0 deduped
  │ └── eslint@8.20.0 deduped
  ├─┬ eslint-config-prettier@8.5.0
  │ └── eslint@8.20.0 deduped
  ├─┬ eslint-config-react-app@7.0.1
  │ ├─┬ @babel/eslint-parser@7.18.9
  │ │ └── eslint@8.20.0 deduped
  │ ├─┬ @typescript-eslint/eslint-plugin@5.30.7
  │ │ ├─┬ @typescript-eslint/type-utils@5.30.7
  │ │ │ └── eslint@8.20.0 deduped
  │ │ ├─┬ @typescript-eslint/utils@5.30.7
  │ │ │ └── eslint@8.20.0 deduped
  │ │ └── eslint@8.20.0 deduped
  │ ├─┬ @typescript-eslint/parser@5.30.7
  │ │ └── eslint@8.20.0 deduped
  │ ├─┬ eslint-plugin-flowtype@8.0.3
  │ │ └── eslint@8.20.0 deduped
  │ ├─┬ eslint-plugin-jest@25.7.0
  │ │ ├─┬ @typescript-eslint/experimental-utils@5.30.7
  │ │ │ └── eslint@8.20.0 deduped
  │ │ └── eslint@8.20.0 deduped
  │ ├─┬ eslint-plugin-testing-library@5.5.1
  │ │ └── eslint@8.20.0 deduped
  │ └── eslint@8.20.0 deduped
  ├─┬ eslint-plugin-jsx-a11y@6.6.0
  │ └── eslint@8.20.0 deduped
  ├─┬ eslint-plugin-prettier@4.2.1
  │ └── eslint@8.20.0 deduped
  └─┬ eslint@8.20.0
    └─┬ eslint-utils@3.0.0
      └── eslint@8.20.0 deduped

Following is the custom eslint plugin i am using in my code:

  "peerDependencies": {
    "eslint": "^8.3.0",
    "eslint-config-react-app": "^7.0.1"
  },
  "dependencies": {
    "@umai/prettier-config": "^11.0.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-jsx-a11y": "^6.6.0",
    "eslint-plugin-prettier": "^4.0.0"
  },

lastly this is my eslintrc.js file

module.exports = {
  // https://github.com/prettier/eslint-plugin-prettier
  extends: [
    'react-app',
    'react-app/jest',
    'airbnb',
    'plugin:prettier/recommended',
    'plugin:jsx-a11y/recommended',
  ],
  plugins: ['jsx-a11y'],
  // NOTE: need to disable the babelOptions for "babel-preset-react-app", as it was breaking due to a bug in CRA5
  // For more info: https://github.com/facebook/create-react-app/issues/12070
  // Remove the below parserOptions when its fixed
  parserOptions: {
    babelOptions: {
      presets: [['babel-preset-react-app', false], 'babel-preset-react-app/prod'],
    },
  },
  rules: {
    // NOTE: to be same as the "@umai/prettier-config" to make sure we follow the prettier rules using eslint
    'prettier/prettier': [
      'error',
      {},
      {
        usePrettierrc: true,
      },
    ],
    'import/no-unresolved': 'off',
    'import/no-named-as-default': 'off',
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    'no-param-reassign': 'off',
    'function-paren-newline': 'off',
    'arrow-parens': [0, 'as-needed'],
    'arrow-body-style': ['error', 'as-needed'],
    'comma-dangle': ['error', 'only-multiline'],
    'import/no-extraneous-dependencies': 0,
    'import/prefer-default-export': 0,
    'template-curly-spacing': 'off',
    'max-len': 0,
    'react/forbid-prop-types': 0,
    'react/jsx-curly-brace-presence': 'off',
    'react/jsx-first-prop-new-line': [2, 'multiline'],
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    'react/require-default-props': 0,
    'react/self-closing-comp': 0,
    'class-methods-use-this': 0,
    'react/jsx-one-expression-per-line': 0,
    'react/function-component-definition': 0,
    'no-plusplus': 'off',
  },
  ignorePatterns: ['config/', 'scripts/', 'public/'],
};

[m-nathani]

Loosk like dom keys are not loading from aria-query or needs some type checking on this line

const domElements = [...dom.keys()];

[m-nathani]

The solution we came for this was after checking the package-lock.js file with same branch was adding the missing package aria-query to it.

Somehow on running npm i it was not generating aria-query in the lock file on linux and then doing:

npm i -D eslint-config-react-app eslint-plugin-jsx-a11y
npm uninstall eslint-config-react-app eslint-plugin-jsx-a11y

comparing the diff of lock file generated we found the missing code below:

    "node_modules/eslint-plugin-jsx-a11y/node_modules/aria-query": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
      "dev": true,
      "dependencies": {
        "@babel/runtime": "^7.10.2",
        "@babel/runtime-corejs3": "^7.10.2"
      },
      "engines": {
        "node": ">=6.0"
      }
    },

In the diff it looks like aria-query was missing from eslint-plugin-jsx-a11y’s dependencies and that is where the dom in dom.keys() is coming from which was causing the error.

However, i still dont know why it did not generate aria-query package before on simple doing npm i.

[ljharb]

Seems related to #875.

[ljharb]

What version of @babel/runtime do you actually have installed on disk?