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.”

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.

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 react-scripts@latest

// yarn
yarn add react-scripts@latest

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 react@latest react-dom@latest

// if you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest

// OR

// Yarn
yarn add react@latest react-dom@latest

// if you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --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!