Failed to load plugin 'jsx-a11y' declared in 'package.json » eslint-config-react-app': Unexpected token =

Question

Just got this error from today, I have config in package.json file:

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

I have not changed that file for ages, it was fine before today. Anyone has idea? Thanks!

Just try to compile frontend components css, js files etc. But failed to compile from today.

Answer 1

I think i finally realized what the issue is, i was running node 10.x version while the required node version was 14.x. upgraded my node version and all resolved

Answer 2

In my case, we have a React app created with Create React App (CRA) back in 2019. CRA automatically gave us ESLint enabled by default, and lint was ran as part of 'react-scripts build'. Our code for this app hasn't changed since early 2020.

Now something has changed somewhere, and ESLint gave us this "unexpected token" regarding 'jsx-a11y'. 'React-scripts build' failed with our build server having Node 10.x version.

Updating Node is one solution, as mentioned by previous answer. But in our case build server is using Node 10.6, managed by other team. I cannot update Node there. I needed to get past this issue while still using Node 10.6.

My quick solution was to disable the CRA-provided ESLint so it's not executed as part of build, and to add ESLint manually so I can run it on-demand within my dev environment. (I also actually downgraded Node on my laptop to match Node version 10.6. used by build server, so I'll catch these more easily in the future.)

Few resources I found useful and combined from there: Disable ESLint that create-react-app provides , https://andrebnassis.medium.com/setting-eslint-on-a-react-typescript-project-2021-1190a43ffba

Answer 3

You must install the module eslint-plugin-jsx-a11y.

Type...

npm install eslint-plugin-jsx-a11y

and press enter.

After install it will work.

Answer 4

The problem seems to be due to the ES-lint.

I checked my package.json file and looked for the following code snippet.

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

Not the best solution but removing this part of the code from package.json worked for me. (ps we can install any linter later on)

Answer 5

Downgrading to the version of node that was specified in my project's "package.json" fixed this for me. You can use nvm to change node versions.