"React must be in scope when using JSX" (react/react-in-jsx-scope with "window.React = React" on index.js)

Question

I am following Chapter 5, "React with JSX", of "Learning React" from O'Reilly.

I wrote the Recipes App using create-react-app as the base.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import App from './App';
import Menu from './Menu';

import registerServiceWorker from './registerServiceWorker';

import data from './data/recipes';

window.React = React;

ReactDOM.render(<Menu recipes={data} />, document.getElementById('root'));

registerServiceWorker();

Menu.js

import Recipes from './Recipes';

const Menu = ({recipes}) => (
    <article>
        <header>
            <h1>Delicious Recipes</h1>
        </header>
        <div className = "recipes">
        {recipes.map((recipe, i)=>    
            <Recipes key={i} {...recipe}  />
        )}
        </div>
    </article>
);

export default Menu;

And have the following error:

Failed to compile ./src/Menu.js
  Line 5:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 6:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 7:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 9:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 11:  'React' must be in scope when using JSX  react/react-in-jsx-scope
    
Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

The book says "setting window.React to React exposes the React library globally in the browser. This way all calls to React.createElement are assured to work". But it seems like I still need to import React on each file that uses JSX.

Epiphora

Answer 1

Import React on top of your Menu.js file:

import React from 'react'

React should always be imported in a particular file, that uses JSX if you are working with this library (React) in your project.

Slut

This Doesnt hold true for React 17 + – Unciform

But I do see this error with react 18.0.0 – Nazi

I also have this error when running Docker in a container, React 18.0.0 – Dumas

I use react18.2.0 and I still get this error. I thought it was because I was using eslint and I added the rule {"react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off",} but it still did not work @ShanmukhaSampathKumar – Psychosomatics

Answer 2

In react 17 there is no need to import. We can write code without importing react from React

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Together with the React 17 release, we’ve wanted to make a few improvements to the JSX transform, but we didn’t want to break existing setups. This is why we worked with Babel to offer a new, rewritten version of the JSX transform for people who would like to upgrade.

Upgrading to the new transform is completely optional, but it has a few benefits:

• With the new transform, you can use JSX without importing React.

eslint default config for react will still warn about it. But that can be disabled:

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md

If you are using the new JSX transform from React 17, you should disable this rule by extending react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends").

Glendon

This was useful, because the error started when I downgraded from v17 to v16.13.1. – Florance

create-react-app does not warn about that anymore. it is probably fixed. but eslint default config does. So might be better to disable that rule: react/react-in-jsx-scope – Lewert

These links show what to do to the well-informed, but changing eslint config is not something that beginners will be familiar with. Would it be possible to add step-by-step instructions? The linked docs may be canonical, but they're not very transparent! – Uninterrupted

Answer 3

This happens due to “React” import necessary in JSX file. The React library must also always be in scope from JSX code because JSX compiles as a react.

in your case 'React' must be import in Menu.js,

import React from "react"; 

this is an error most beginner react developers made.

And also You can refer

Himelman

Answer 4

UPDATE 2022

Importing React is considered as "unused import" and is recommended to be removed on longer term, see react documentation.

I got this error when setting up linter, here this is also pointed out by the eslint documentation, that you don't the need extra import from the React version 17 on.

Arrhenius

Answer 5

This is as aresult of not importing React module from 'react' properties hence you can try importing the module and try using 'export' when declaring a function so that it will be easy to import them in other pages using 'import {Menu} from menu' as shown below

import React from 'react';
import Recipes from './Recipes';

export const Menu = ({recipes}) => (
    <article>
        <header>
            <h1>Delicious Recipes</h1>
        </header>
        <div className = "recipes">
        {recipes.map((recipe, i)=>    
            <Recipes key={i} {...recipe}  />
        )}
        </div>
    </article>
);

Cholecystectomy

add some context to explain how your answer will solve problem, that will really help the community in long run – Antinode