close

[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?

  1. How To Solve 'React' must be in scope when using JSX react/react-in-jsx-scope Error?

    To Solve 'React' must be in scope when using JSX react/react-in-jsx-scope Error 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: “react/react-in-jsx-scope”: “off”, And Now, Your error must be solved. Thank You.

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

    To Solve 'React' must be in scope when using JSX react/react-in-jsx-scope Error 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 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

4 thoughts on “[Solved] ‘React’ must be in scope when using JSX react/react-in-jsx-scope”

  1. I copied and pasted the line of Solution 2: into json file but it say that “end of file expected”.
    What to do about it?
    Thank you.

    Reply
    • I am sorry for error you have occurred. Just Copy This line and paste in your .eslintrc.js / .eslintrc.json Also Updated in Solution 2

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

      Reply

Leave a Comment