DEV Community

Chandelier Axel
Chandelier Axel

Posted on

Why do React need to be in scope for JSX ?

React must be in scope when using JSX

Quite an annoying error, right ? What does it even mean anyway, you simply wrote a pretty basic component, and nothing happen but this error.

You don't know how to fix it ? Or you never bothered looking at why you need to do so ? Or maybe you heard that the versions 17+ of React dispense us from doing so, but still getting the error ?

You're at the right place, we'll go through the why, up to the how. Feel free to skip any part with the table of contents below.

Got your coffee ? ☕ Let's dive in.

Table of contents

Why are we getting this error ?

First, in order to understand why, you need to know how the JSX synthax work. For a complete breakdown, feel free to read this previous blog post that I wrote.

For a quick answer, let's analyse a React component :

<CustomButton color='red'>Click me !</CustomButton>
Enter fullscreen mode Exit fullscreen mode

This example come directly from the React official documentation

When React receive this component, it basically transform into this :

React.createElement(CustomButton, { color: 'red' }, 'Click me !');
Enter fullscreen mode Exit fullscreen mode

Because JSX is nothing but syntactic sugar for the createElement function, the code above will be called when creating our component.
But .. In the context of our file, we never imported React. What will happen ?

Exactly : React must be in scope when using JSX.

If we don't import it at the top of our file, the React.createElement would crash, as React would be undefined.

How to fix ?

As stated before, you need to import React within your file, in order for the script to resolve properly the createElement function. From here, you have multiple choices :

import React from 'react';
// or
import * as React from 'react';
Enter fullscreen mode Exit fullscreen mode

Feel free to refer this Dan Abramov tweet for more informations.

At the end, it's up to your preferences, there's no immediate downsides using one or the other.

Wait, didn't you say that in version 17+ we don't need it anymore ? Indeed.

React version 17 and beyond

As of React v.17.0, we are now free from doing such import. If you want more informations, here's the link for the official release notes from the React team.

If you want the quick explanation, they added some code for compilers (such as Babel) to plug in, and add the import themselves when compiling our JSX. Hot stuff, right ?

But you might still get the error.

What ?

Yes, but it's not from React ! As we said before, most of the time, the projects use a linting tool such as Eslint, and some specific set of rules as been created for React. One of them enforce you to import React if it detect any JSX within the file.

If you're using React v.17.0 and beyond, you can freely disable the rules.

"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
Enter fullscreen mode Exit fullscreen mode

You can now remove all the

import React from 'react';
Enter fullscreen mode Exit fullscreen mode

Before your finished your coffee, you learned why we needed to import React with JSX.
I hope you enjoyed the read, and learned as much as I did. If you have any questions or comments, feel free to reach to me on Twitter or in the comments below. Have a nice day !

Top comments (15)

simteledev profile image
Okwa Simon Ogbu

Thanks for this man, is really helpful

creator_yudai profile image
Yudai H

You just saved my day sir ❤️

jeluchez profile image


alaa_courdova profile image
Alaa Courdova

thats was helpful ,, thank you

patriick_siqueira profile image
Patrick Siqueira

Oh my god, your post is great. You write very well. Not only did I solve my mistake, I learned a little more. simply thank you.

chandelieraxel profile image
Chandelier Axel

My pleasure, I'm glad you learnt something along the way !

c00p3r14 profile image

Hi Chandelier. Your post is very informative. Thanks for that. However, I am struggling to figure out what file is used to switch off these rules and where is it found from the react App folder. Kindly specify. Your prompt assistance will be greatly appreciated.

chandelieraxel profile image
Chandelier Axel

Hi ! Thanks for the feedback !

First, check that Eslint is properly installed. You should have, at the root of your project, a file names eslint.something. If not, feel free to check the documentation : in order to create a proper one.
Then, all you have to do is to add the rules under the "rules" section of the file.

crazyoptimist profile image

Content very well done. Thank you!

romaintrotard profile image
Romain Trotard

Quick and effective article. Well done :)

chandelieraxel profile image
Chandelier Axel

Thanks !

adeelalam profile image
Adeel Alam

You rock buddy! {props.applauds}

chandelieraxel profile image
Chandelier Axel

Thanks ! :D

aaaasif profile image
Abdullah Al Asif

My pleasure, You just saved my day sir ❤️

igortimonin profile image
Igor Timonin

This error can appear not only because of the old version of React, but also because of the outdated version of Node.js - below 17