eslint-plugin-react: react-scripts build unable to load 'plugin:react/jsx-runtime'

eslint-plugin-react has been installed to dev dependencies. I have extended both plugin:react/recommended and plugin:react/jsx-runtime to allow for JSX transforms. My .eslintrc.js extends section currently looks like this

extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime'
  ]

When running react-scripts build I get the following error:

$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to load config "plugin:react/jsx-runtime" to extend from.
Referenced from: C:\Projects\Work\web-app\.eslintrc.js

error Command failed with exit code 1.

Any solutions or advice would be very much appreciated.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 3
  • Comments: 17 (9 by maintainers)

Most upvoted comments

It means create-react-app made choices that prevent you from using the latest version of eslint-plugin-react automatically. You can either “eject” (a CRA idiom, you’ll have to read the docs); or update your dependencies (if the react-scripts dependency has a later version available that allows the latest version of eslint-plugin-react); or, you have no recourse.

If you’re having trouble, I’d file an issue on create-react-app - if they’d used a semver range inside react-scripts, you wouldn’t be running into this problem.

@mmnoo that’s because you put it in the “plugins” array. it goes in the “extends” array. When I fix that, it works fine.

Ok, in that case it should be deduping.

If someone can provide a repro repo, id be happy to take a look.