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 ?
• How to fix ?
• React version 17 and beyond

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>

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 !');

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';

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"

You can now remove all the

import React from 'react';

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 !