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

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

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 youre 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

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

For those who still dont get the accepted solution :

Add

import React from react
import ReactDOM from react-dom

at the top of the file.