Solve the Error “‘React’ must be in scope when using JSX react/react-in-jsx-scope”

JavaScript is widely used for creating interactive designs by programmers and developers. Every website has elements designed with it, and there are infinite programs that programmers create to make the web pages and applications interactive. When it comes to JavaScript’s popularity, none can forget the libraries and frameworks. With many libraries, programming has become simpler. React is a well-known library for creating the user interface and its component. It helps the programmers to design the front end. When working with React, you may experience various errors, and “‘React’ must be in scope when using JSX react/react-in-jsx-scope” is one of those.

No matter how complex the error looks, it is never that complicated. We are here to help you solve the error in an efficient way. The simple yet reliable solutions we are going to share with you. But, first, we have to see how the error pops up

How the error shows up

When you are creating a project on react, you end up with the error warning. Let’s have a look at the program script

import react , { Component}  from 'react';
import         { render   }  from 'react-dom';

class TechView extends Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath'
       }
    }
    render(){
        return(
            <span>Welcome to Tutopal</span>
        );
    }
}

export default TechView;

After running the script, you get the following error

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

How To Fix the Error “‘React’ must be in scope when using JSX react/react-in-jsx-scope”

The issue arises when you forget to import React into the file context. You land up in the error warning as React.createElement crashes when you miss importing at the start of the file or else it will be undefined. We have come up with a few solutions to help you resolve the error you are getting

Solution 1 – Import correctly

Sometimes importing in the wrong way is the root cause of the error message popping up, you better say the incorrect spelling is the reason. It is now required to be called React in the scope when you are trying to import React. Have a look at the code for a better understanding

import React, { Component } from 'react';

import React, { Component } from ‘react’;

It helps you remove the error.

Solution 2 – Turn the rules off

Another option to get the error fixed is to turn off the rules in the eslint configuration file. For this, you need to add a command in the .eslintrc.js/.eslintrc.json. Check out the code to implement

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
  }

The ESLint is used to find and report patterns in JavaScript code as well as ECMAScript code to ensure the issue is minimized.

Solution 3 – Install Babel plugin react-require

With the help of the react-require plugin, you can get rid of the error warning. This babel plugin is perfect for automatically adding import React from ‘react’ for all the JSX files. You just need to install the plugin react-require. To install, use the below command

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

Use .babelrc to include react-require into it. You need to define the plugin before the transform-es2015-modules-commonjs plugin as ES2015 is used to import React. Check it out

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

Conclusion

In this post, we shed light on the solutions to fix the error “‘React’ must be in scope when using JSX react/react-in-jsx-scope”. I hope you enjoyed it and find it helpful! I wish you luck!