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

Question

The import line should be:

import React, { Component }  from 'react';

Note the uppercase R for React.

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

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.

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

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

import React, { Component } from 'react';

This is a spelling error, you need to type React instead of react.

If you'd like to automate the inclusion of import React from 'react' for all files that use jsx syntax, install the react-require babel plugin:

npm install babel-plugin-react-require --save-dev

Add react-require into .babelrc. This plugin should be defined before transform-es2015-modules-commonjs plugin because it's using ES2015 modules syntax to import React into scope.

{
  "plugins": [
    "react-require"
  ]
}

Source: https://www.npmjs.com/package/babel-plugin-react-require

The error is very straight forward, you imported react instead of React.