445

I am an Angular Developer and new to React , This is simple react Component but not working

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>hello Tech View</span>
        );
    }
}

export default TechView;

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

25 Answers 25

634

The import line should be:

import React, { Component }  from 'react';

Note the uppercase R for React.

4
  • 15
    how to avoid it. I mean when I create a stateless function, in Nextjs it does not require it Commented May 7, 2018 at 7:07
  • 4
    @MuhaiminCS change the rule in your eslintrc file
    – patrick
    Commented May 7, 2018 at 7:09
  • 9
    it actualy for older version of React. for newer it not need. right anwere is bellow. by Paul Razvan Berg "rules": { ... "react/react-in-jsx-scope": "off" ... }
    – romanown
    Commented May 7, 2022 at 21:51
  • but why ? before applying below command it's working export NODE_OPTIONS=--openssl-legacy-provider Commented Jan 12, 2023 at 11:00
321

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 (Next.js cheatsheet)

5
  • 6
    NextJs user here, thanks for this. Given adding the rule "react/react-in-jsx-scope": "off" will eliminate the error, what does adding globals accomplish? Thanks!
    – DeBraid
    Commented Jun 10, 2020 at 15:27
  • Note that it'll be "hard" to test your components if React isn't imported, though. In such case, your test file will need to import it, if your component doesn't. Commented Nov 2, 2020 at 14:48
  • @GorvGoyl Even after doing this, the build fails with the same error. Any idea how to suppress that? Commented Nov 6, 2021 at 18:42
  • This was also relevant for me in a preact project. Thank you!
    – dcchuck
    Commented May 15, 2023 at 23:24
  • This became possible in React v17. Official announcement: legacy.reactjs.org/blog/2020/09/22/… Commented Dec 18, 2023 at 14:38
101

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

"rules": {
   ...
    "react/react-in-jsx-scope": "off"
   ...
}
4
  • 1
    Thanks great, small note, I think it's preferable to follow the 0 (off), 1 (warning) and 2 (error) convention over using "off". To keep the config more coherent.
    – Operator
    Commented Aug 25, 2021 at 12:52
  • 7
    Choosing either 0 or "off" is a matter of opinion. Commented Aug 25, 2021 at 15:40
  • Ah I honestly didn't realise all numbers mapped to a string equivalent as well... my mistake. So you can actually do "off, warning, error" or "0, 1, 2".
    – Operator
    Commented Aug 26, 2021 at 15:15
  • Is it safe to disable it in react-native (I'm using the latest version 0.71) !? Commented Feb 8, 2023 at 11:44
68

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.

57

If you are running React 17+ (and in 2022, I assume, that you are) - you need to add the following line to your .eslintrc:

{
  "extends": ["plugin:react/jsx-runtime"]
}

Then only import React once in your top-level file, like App.jsx - and no need to import it anywhere else, unless you need an api like useEffect etc.

3
  • 5
    I believe this is the most correct answer.
    – Julio W.
    Commented Jan 17, 2023 at 14:26
  • 1
    Only this worked for me on React-Native 0.71.4 and React 18.2, thanks! Commented Apr 12, 2023 at 5:08
  • 1
    beware that this will make it so eslint doesn't see your ts/tsx files and its hard to debug Commented Sep 24, 2023 at 9:02
16

I had the similar issue.

Got fixed after i added the code below in the main component: App.js If you have other components, make sure to import react in those files too.

import React from "react";
15

for me I got this issue once I used npm audit fix --force so it downgrade react-scripts to version 2 and it forces me to install eslint versions 5 and issues started to flood, to fix this I have update it again react-scripts and things worked out. Also make sure that your eslint contains those rules

module.exports = {
  extends: ['react-app', 'react-app/jest', 'airbnb', 'prettier'],
  plugins: ['prettier'],
  rules: {
    ...
    // React scope no longer necessary with new JSX transform
    'react/react-in-jsx-scope': 'off',
    // Allow .js files to use JSX syntax
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    ...
  },
}

11

add "plugin:react/jsx-runtime" to extends in your eslint config file, refer react-in-jsx-scope

9

Just import React fix this issue:

import React from "react"
8

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

5

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

5

Whenever we make a custom component in React using JSX, it is transformed into backward-compatible JS code with the help of Babel.
Since the JSX compiles into React.createElement, the React library must also always be in scope.

Example:

This custom component:

<MyButton color="blue" shadowSize={2}> Click Me </MyButton>

is transformed into:

React.createElement(MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')
^^^^^

Since the converted code needs the React library, we need to import it into the scope.

React Docs Reference

Fix: Import React

import React from 'react';
// or
import * as React from 'react';

Pick one, it depends on the user!

NOTE:
As of React 17+, we are free from doing such import, but it's better to add the imports just to be on the safe side because errors can be generated because of ESLint!

One can disable the rule in the ESLint config file (.eslintrc.json) to ignore these errors:

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

For me, I just had to import React.

import React from 'react';

4

In my case, I had to include this two-line in my index.js file from the src folder.

import React from 'react'
import ReactDOM from 'react-dom'

In your case, this might be different. You may need to include components if you're using class-based components.

import React, { Component }  from 'react';

Alternatively, If you are using eslint you can get some solutions from the above comments.

know more

4

When using the react framework, you first need to import the react from react and always keep the first letter of react in uppercase after import.

import React, {Component} from 'react'`
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>hello Tech View</span>
        );
    }
}
export default TechView;
3

One thing that I noticed is that import React from "react"; should be there instead of import react , { Component} from 'react'; Other Things I have done is,

(1) added below lines to index.js file.

import React from 'react'
import ReactDOM from 'react-dom'

if not worked add this line for ReactDOM import ReactDOM from "react-dom/client"; instead of import ReactDOM from 'react-dom'

(2) change following properties for eslint configuration file.

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

But Starting from React 17,Dont need to add import React from 'react' and next js as well

1
  • 1
    that's right! It worked for me. Commented Nov 23, 2022 at 20:13
2

This is an error caused by importing the wrong module react from 'react' how about you try this: 1st

import React , { Component}  from 'react';

2nd Or you can try this as well:

import React from 'react';
import { render   }  from 'react-dom';

class TechView extends React.Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath',
       }
    }
    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}

export default TechView;
2

Upgrading the react-scripts version to latest solved my problem.

I was using the react-scripts version 0.9.5 and upgrading it to 5.0.1 did the job.

2

The line below solved this problem for me.

/** @jsx jsx */
import {css, jsx} from "@emotion/react";

hope this help you.

2

This error usually occurs when you're using JSX syntax in a file that doesn't have React imported at the top.

To fix it, you need to make sure that you import React at the top of the file where you're using JSX. Here's an example:

import React from 'react'

function MyComponent() {
  return <div>Hello, world!</div>
}

Make sure to add React import at the top of any file that uses JSX.

1

Follow as in picture for removing that lint error and adding automatic fix by addin g--fix in package.json

enter image description here

1

A crucial point (and perhaps a simpler solution) here if you're using TypeScript then use the following in your tsconfig.json:

{
  ...
  compilerOptions: {
    ...
    // if you use react-jsx here the import React statement won't be required
    // if you use react here you'll need the import React statement to make TS happy
    "jsx": "react"
  }
}
0

in babel, add "runtime": "automatic" option

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-env"
  ],
  "plugins": [
    
  ]
}
0

For future references you can try this one The react packages might have not been updated

npm install react@latest react-dom@latest

for yarn

yarn add react@latest react-dom@latest

If there is compatibility issues, you can git revert to the previous packages.

-1

I updated the version of my project's react-scripts by running the below code in the terminal and it worked.

npm install react-scripts@latest
1
  • This will not work. Say for example I am getting this issue with react 16 and if i run the cmd with @latest it will install the latest version of react which might be higher than 16. Commented Feb 8, 2024 at 16:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.