Why do React need to be in scope for JSX ?
Tags: javascript, react, beginners
Published: 2021-09-20 20:00:07

## `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 ?](#why-this-error)
- [How to fix ?](#how-to-fix)
- [React version 17 and beyond](#react-17)

## Why are we getting this error ?

<a name="why-this-error"></a>

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](https://dev.to/chandelieraxel/how-does-react-work-under-the-hood-jsx-wise-44pd) that I wrote.

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

```jsx
<CustomButton color='red'>Click me !</CustomButton>
```

_This example come directly from the React [official documentation](https://reactjs.org/docs/jsx-in-depth.html#:~:text=React%20Must%20Be%20in%20Scope,scope%20from%20your%20JSX%20code.&text=If%20you%20don't%20use,scope%20as%20the%20React%20global.)_

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

```js
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 ?

<a name="how-to-fix"></a>

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 :

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

_Feel free to refer this Dan Abramov [tweet](https://twitter.com/dan_abramov/status/1308739731551858689) 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

<a name="react-17"></a>

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](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 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](https://eslint.org/), 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.

```json
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
```

You can now remove all the

```js
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](https://twitter.com/ChandelierAxel) or in the comments below. Have a nice day !