Ошибка react must be in scope when using 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 ?
• 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 !

Working with React can sometimes be tricky, especially when dealing with errors that are not always easy to understand.

A common error developers may encounter is the “React must be in scope when using JSX” error. This error occurs when React is not properly imported or initialized in a component that uses JSX syntax.

In this article, we will discuss the causes of this error and provide solutions on how to fix it.

What Causes the “react must be in scope when using jsx” Error?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code in JavaScript. Browsers don’t understand JSX, but preconfigured toolkits like Create React App include a JSX transform tool under the hood that converts the JSX code into valid JavaScript code, which can be interpreted by browsers.

In React versions prior to 17.0, JSX was transformed into React.createElement() function calls by the JSX transformer at compile-time. This required importing React for the React elements to work. With the introduction of a new JSX transform in React v17.0, special functions from the React package’s new entry points are automatically imported, eliminating the need to import React in every file that uses JSX explicitly.

As an example, let’s take a look at the following functional component:

function App() {
  return <h1>Welcome to Kinsta!</h1>;
}

At compile time, it is transformed into regular JavaScript:

function App() {
  return React.createElement('h1', null, 'Welcome to Kinsta!');
}

Because React is undefined, this will always throw the error “‘react’ must be in scope when using jsx.”

Ever faced this annoying React error? This post has all the causes and fixes to get your project back on track. 🔧Click to Tweet

2 Ways To Fix the “react must be in scope when using jsx” Error

This error can be fixed in a few ways depending on the version of React you are using.

• Before React v17
• React v17 and Higher

1. Include or Correct React Import Declaration (Fix for Before React v17)

If you are using an older version of React, you may be missing or have an incorrect import statement for ‘react’. Make sure you have the correct import statement at the top of your file (with a capital “R” on “React”):

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Your functional component will now look like this when transformed into regular JavaScript:

import React  from 'react';

function App() {
  return React.createElement('h1', null, 'Welcome to Kinsta!');
}

2. Update ESLint Configuration (Fix for React v17 and Higher)

In React v17.0, a new JSX transform was introduced, which automatically imports special functions from the React package’s new entry points, removing the need to import React in every file that uses JSX explicitly.

For example, take the following functional component:

function App() {
  return <h1>Welcome to Kinsta!</h1>;
}

This is what the new JSX transform compiles it to:

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Welcome to Kinsta!' });
}

This means you no longer need to import React into your components to use JSX. If you keep getting this error even after checking your package.json file to confirm your React version, you have to update your ESLint configurations.

At this stage, this is technically no longer a React error but rather an ESLint error.

Note: You often use linting tools like ESLint in your React project because it checks your code to detect potential errors that can break your code either now or in the future. This tool forces you to import React when it detects any JSX around the file.

When you are sure your React version is v17.0 or higher, then it’s safe to disable the rules that ensure you import React when you use JSX in your React.

There are two major ways to update ESLint configurations. If you have a .eslintrc.js or .eslintrc.json file. Add the following rules to your .eslintrc.js file.

"rules": {
  // ...
  "react/react-in-jsx-scope": "off",
  "react/jsx-uses-react": "off",
 }

Else, you can update the eslintConfig object in your package.json file:

{
  "name": "quotes-circle",
  // ...
  "dependencies": {
    // ...
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "react/jsx-uses-react": "off",
      "react/react-in-jsx-scope": "off"
    }
  },
}

In the code above, react-in-jsx-scope rule is turned off, so ESLint won’t throw errors when you fail to import React.

At this point, you should have fixed the ‘react’ must be in scope when using jsx” error once and for all. But it could be the case that something got in your way, and the error is still there.

Let’s take a look at a few more ways for you to try to fix it.

Additional 3 Ways to Fix the “react must be in scope when using jsx” Error

Suppose the error still persists. Here are three additional ways to fix the ‘react’ must be in scope when using jsx” error.

1. Update the Version of React-Scripts

You can update the version of your project’s react-scripts by running the following command in your terminal:

// npm
npm install [email protected]

// yarn
yarn add [email protected]

2. Delete Node_modules Folder and package-lock.json File

if the error persists, then it’s possible some of your dependencies may be wrongly installed. You can fix this by deleting your node_modules folder and package-lock.json file (not package.json). Then run the following command to install the packages afresh:

npm install

Then restart your dev server.

3. Update the Versions of React and React-Dom

Finally, if the error persists, update your versions of react and react-dom using the commands below:

// npm
npm install [email protected] [email protected]

// if you use TypeScript
npm install --save-dev @types/[email protected] @types/[email protected]

// OR

// Yarn
yarn add [email protected] [email protected]

// if you use TypeScript
yarn add @types/[email protected] @types/[email protected] --dev

At this point, it is certain that this error will be fixed.

Summary

The “React must be in scope when using JSX” error is a common issue developers may encounter when working with React. This error occurs majorly in earlier versions of React v17 when the JSX syntax is used in a file, but the React library is not properly imported or included. It also occurs in higher versions of React v17 when ESLint configurations throw the error or when some dependencies in your node_modules folder are wrongly installed.

Based on the React version you’re working with, there will be different ways you can use to fix this error which we outlined in the article.

Now it’s your turn: Have you ever encountered this issue? How did you solve it? Are there any other approaches you used that are not covered in this article? Let us know in the comments!

I initialised a React project with TypeScript using the CLI command create-react-app client --typescript. Then, I ran npm start but received the following compilation error:

./src/App.js
  Line 26:13:  'React' must be in scope when using JSX  react/react-in-jsx-scope

I did not even modify the boilerplate project provided by create-react-app other than removing unnecessary logo files, and my previous React apps done using TypeScript compiled just fine. Below is my App.tsx and index.tsx file: (note that the logo in App.tsx was removed, and I did not touch index.tsx)

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

App.tsx:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
        Lorem
    </div>
  );
}

export default App;

React and ReactDOM are imported, so what caused this error?

Edit:

I found out that npm start, which runs react-scripts start, is compiling my .tsx files into .js files, which probably caused this issue. What might have caused the above behaviour?

Do you want to explore why react must be in scope when using JSX? Then proceed further and gather better ideas. In general getting an error like ‘react must be in scope when using JSX’ is somewhat annoying. So what does it mean? You may have written a basic component and nothing happened but simply getting this type of error.

Do you have any idea of fixing such errors? Or you didn’t give importance to such errors? Have you used versions 17+ of react dispense and still getting the same error? Then this guide can help you gather better ideas. Check further and collect the complete idea of everything.

Why are you getting this error?

Before understanding the error, you must know the working of JSX syntax. To get the quick answer, you can check out the process of analysing the react component.

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

It directly comes from the react official documentation.
When react get this component, it will transform basically into this:

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

The JSX is the syntactic sugar useful for the createElement function. The above mentioned code can be called while creating the component. But in the context of the file, we never imported the React. So what will happen further?

React must be in scope when using JSX

When you don’t import it at the top of the file, then the React.createElement may crash, as React can be undefined.

How to fix the error?

You have to import react around the file for the script to properly resolve the createElement function. Here you can explore multiple choices:

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

Finally it’s up to your choice, there is no immediate downfall using one or other.

React version 17 and beyond:

Now you can get free from doing such imports as of react v.17.0. You can hire react team from Bosc Tech Labs to get more ideas about such processes effectively.

When you want a quick explanation, they have added certain essential code for compilers to plug in. Then they have started adding the imports themselves to compile the JSX. It is really a hectic process.But still you may get such errors.

But it is not from the react! As already said, projects are using the linting tool like Eslint for React projects most of the time and certain specific rules can be created for React. It can force you to import React when it detects any JSX around the file.

When you are using React v.17.0 and beyond, you can disable the rules freely.

"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
Now you can remove all the 
import React from 'react';

Impacts of using react:

The JSX using the react is very similar to the react statements. The react condition is efficient for using the collection statements in the react variables, where the react statements cannot be used to execute those types of statements.

Because the react statements should have the increment statements in them, while the react statements don’t need to have the count increment for executing the statements. They are getting executed until the collection has finished its execution of the statements.

The syntax for using the react statements should need to place the react keyword in the code followed by the usage of the parenthesis. It represents the single items in the collection of the various statements.

Then the statements are followed by the use of the keyword and used in the collection until the React JSX statements are executed. While in the use of the react in the body of the statements, you may have access to the current item in the statements used and declared later.

React statements in the scope:

The use of reacting statements is used for the JSX statements for the general purpose JSX. The condition for using the react statements is in either of the single statements, or it can be used for the block of the statements needed to be executed.

The condition used in the reactions of the scope may be the non-zero value, expressions or any true value of the statements. If the condition statements in the react are false, the control of the program is getting passed to the termination of the react statements.

The most crucial fact in executing the react is not to execute all of the statements at all. It first checks the condition of the statements. If it is true, it gets processed to the next execution of the statements. If false, the JSX statements are skipped, and only the first statement is executed with the JSX termination.

For using react, the conditions in the brackets are needed to follow the below statements, and the executed statements are placed in between open and closed parenthesis.

The react must begin with the ‘while’ keyword, followed by the use of the parenthesis and the condition for the react to be continued.

With the use of the react statements, the conditions can get either typically decremented or increment based on counting the JSX statements needed to be executed.

For example, you can use either ‘+” or the “-“ symbols to increment the count more effectively until the react ends.

Grab the essential factors:

The react is the most effective choice if you want to store a similar collection of the elements in the statements. Still, there is no need to use any separated variable to execute the react statements.

For the use of the JSX in the react elements, the JSX statements are getting used where it doesn’t need to use the type of increment or the count statements for executing the JSX statements in the programming scope.

Only the same type of data is accessed with the react elements, and they are getting initialised with the brackets with the variable types and the variable name. For example, it can be displayed between the programming codes. The react members start from 0 and are less than one number in the count.

Conclusion:

From the above mentioned scenario, now you have got the idea about how to fix react must be in scope when using JSX error. You can get the help of react developers team to fix everything as quickly as possible. Finally got an answers for all your questions.

Frequently Asked Questions (FAQs)

1. What is JSX in react?

JSX is the JavaScript XML, allowing writing an HTML in react. Due to this, it is easy to write and add the HTML in React.

2. Is it possible to utilize JSX without React?

JSX is not a need for using React. Making React without JSX is much more convenient when you are not required to set up the compilation in your build environment. Every JSX element is only the syntactic sugar to call React.

3. Where can I Put my JSX files?

Keep the JSX files in the Presets > Scripts folder.

Book your appointment now