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

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

Solution 2

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

Solution 3

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>
);

Solution 4

IN latest update of react there is no need to used we can write code without importing react from React

import React from 'react'

Solution 5

import React

import React from 'react'

this should work

View more solutions

Comments

[Arun Vinoth - MVP]

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

[Carloso]

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

[Alberto Millan]

This Doesnt hold true for React 17 +