Getting 'React' must be in scope when using JSX

Question

I am new to react and I tried the following code

person.js

const element = <h1>Hello world</h1>;
export default element;

App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';



function Hello() {
  return Person.element;
}



class App extends Component {

  render() {

    return (
      <div className="App">
        <Hello></Hello>
      </div>
    );
  }
}

export default App;

But getting the below errors

work/my-app/src/person/person.js 3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope

When I changed to a simple hello word as below, then it works fine.

person.js

const element = 'hello world';
export default element;

I tried with different ways by checking different forum

importing the ReactDom
in person.js changed to module.exports=element

Both of those should import react, and your imports should go at the top of your file. — zero298, May 25 '20 at 00:30
Judging by the other comments, I think that maybe your imports need to be at the very top of the file — V. Dimitrov, May 25 '20 at 00:33
I have updated the question. When I post the question,by mistake App.js file name has come in between javascript code that was the reason it was showing the imports in between. — user414967, May 25 '20 at 00:55
Does this answer your question? ['React' must be in scope when using JSX react/react-in-jsx-scope?](https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope) — Henry Woody, Oct 23 '22 at 22:03

wxker · Accepted Answer · 2020-05-25T15:19:39.043

2

The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.

person.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';

const element = <h1>Hello world</h1>;
export default element;

edited May 25 '20 at 15:19

answered May 25 '20 at 00:30

wxker

1,841
1
6
16

I have updated the question. When I post the question,by mistake App.js file name has come in between javascript code that was the reason it was showing the imports in between. – user414967 May 25 '20 at 00:56
@user414967 As every other comment and even the other answer has mentioned, you need to import React in all your files that use JSX. **person.js** is not an exception. – wxker May 25 '20 at 15:20
Infact i was trying to avoid the dependency of React. Assume, if this person.js is a third party library, then we cannot import React over there. in such cases, how do we do? – user414967 May 26 '20 at 23:03
@user414967 As long as you are using JSX, you will need to import React. So if you don't want to import React, don't use JSX in the code. – wxker May 27 '20 at 04:36

score 1 · Answer 2 · answered May 25 '20 at 00:30

1

You need to import React in every file that exports a component (App in this case).

answered May 25 '20 at 00:30

Oguntoye

645
1
7
19

I have updated the question. When I post the question,by mistake App.js file name has come in between javascript code that was the reason it was showing the imports in between. – user414967 May 25 '20 at 00:56

score 1 · Answer 3 · answered Feb 13 '21 at 13:44

1

The latest React 17 Version: No need to include React in the scope

If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850

answered Feb 13 '21 at 13:44

Luis Febro

1,733
1
16
21

Getting 'React' must be in scope when using JSX

3 Answers3