Resolving this error: 'React' must be in scope when using JSX

Question

I am using React18.2.0 and I have the error shown below when running my project

I have seen some solutions which suggest if I am using Eslint (which I am), I should disable react scope in the rules. I have as shown in my Eslint config file below but it is not working.

Another solution was to add import React from "react"; This works, however, from the documentation we do not need to include this anymore from React17 upwards. So I do not know why I still have this error.

Any assistance would be appreciated

This is my package.json file

Answer 1

You have to add the 'jsx-runtime' to your ESLint config file – for the new flat structure, your eslint.config.js file should be configured as follows:

// Other imports
pluginReact from "eslint-plugin-react";

export default [

  // (...)

  pluginReact.configs.flat['jsx-runtime'],

  // (...)

];