'React' must be in scope when using JSX react/react-in-jsx-scope?

Solution 1:

The import line should be:

import React, { Component }  from 'react';

Note the uppercase R for React.

Solution 2:

Add below setting to .eslintrc.js / .eslintrc.json to ignore these errors:

  rules: {
    // suppress errors for missing 'import React' in files
   "react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
  }

Why? If you're using NEXT.js then you do not require to import React at top of files, nextjs does that for you.

Ref: https://gourav.io/blog/nextjs-cheatsheet

Solution 3:

For those who still don't get the accepted solution :

Add

import React from 'react'
import ReactDOM from 'react-dom'

at the top of the file.

Solution 4:

If you're using React v17, you can safely disable the rule in your eslint configuration file:

"rules": {
   ...
    "react/react-in-jsx-scope": "off"
   ...
}