Source:  Twitter logo

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.

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.

34 users liked answer #0dislike answer #034
Eduard profile pic
Eduard

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

4 users liked answer #1dislike answer #14
ricky profile pic
ricky

IN latest update of react there is no need to import. We can write code without importing react from React

2 users liked answer #2dislike answer #22
vibhu profile pic
vibhu

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>
);
1 users liked answer #3dislike answer #31
Lamech Desai profile pic
Lamech Desai

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.

0 users liked answer #4dislike answer #40
daza profile pic
daza

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).