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>
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 !
Top comments (15)
Thanks for this man, is really helpful
You just saved my day sir ❤️
excelent
thats was helpful ,, thank you
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.
My pleasure, I'm glad you learnt something along the way !
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.
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 : eslint.org/docs/user-guide/configu... 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.
Content very well done. Thank you!
Quick and effective article. Well done :)
Thanks !
You rock buddy! {props.applauds}
Thanks ! :D
My pleasure, You just saved my day sir ❤️
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