[Solved] ‘React’ must be in scope when using JSX react/react-in-jsx-scope

I am facing the following error: ‘React’ must be in scope when using JSX react/react-in-jsx-scope in ReactJS. We are going to Learn about All Possible Solutions So Lets Get Start with This Article.

How ‘React’ must be in scope when using JSX react/react-in-jsx-scope Error Occurs?

I am facing the following error.

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

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve ‘React’ must be in scope when using JSX react/react-in-jsx-scope Error?

Solution 1: Import Like This

Maybe you are importing the wrong spelled React that’s why this error occurs. Just Import React like this.

import React, { Component }  from 'react';

And Now, Your error must be solved. Thanks.

Solution 2: disable the rule

Just disable the rule in Your eslint configuration file Just like this. First of all, Open your .eslintrc.js / .eslintrc.json and add the following line.

  "rules": {
   "react/react-in-jsx-scope": "off",  
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  }

And Now, Your error must be solved. Thank You.

Conclusion

It’s all About this error. Hope We solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Module not found: Can’t resolve ‘react-router-dom’
• How to Download File in React js?
• How to Use .env File in React Project?
• Attempted import error: ‘Redirect’ is not exported from ‘react-router-dom’
• Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’