Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] Bug: React 17, React is not defined after ejecting #9953

Open
alpeer opened this issue Oct 29, 2020 · 14 comments
Open

[v4] Bug: React 17, React is not defined after ejecting #9953

alpeer opened this issue Oct 29, 2020 · 14 comments

Comments

@alpeer
Copy link

alpeer commented Oct 29, 2020

React version: 17.0.1

Steps To Reproduce

  1. npx create-react-app my-app
  2. cd my-app
  3. npm start (Works like a charm)
  4. npm run eject
  5. npm i
  6. npm start (ReferenceError: React is not defined)

Link to code example: https://codesandbox.io/s/ecstatic-wood-ou6px

The current behavior

I upgraded react to 17 and removed "import React"s from my project files (except index.js where react mounted). But I got "ReferenceError: React is not defined" in those files.
To investigate the issue behind this, I created a new react app, the new JSX transformation was working. But when I eject, it throws the same errors.
So;
Without react-scripts, new JSX transformation doesn't working.

The expected behavior

Components should render without declaring React (import React from "react") if React is in scope.

@kachkaev
Copy link

I guess that this issue should be moved to https://github.com/facebook/create-react-app

@gaearon gaearon transferred this issue from facebook/react Oct 29, 2020
@gaearon gaearon changed the title Bug: React 17, React is not defined [v4] Bug: React 17, React is not defined Oct 29, 2020
@gaearon gaearon changed the title [v4] Bug: React 17, React is not defined [v4] Bug: React 17, React is not defined after ejecting Oct 29, 2020
@alpeer
Copy link
Author

alpeer commented Oct 29, 2020

This is not an issue about create-react-app.
I don't use create-react-app in the project I had problem with jsx-transformation.
I have just mention to show you example and give more idea about issue.

Thanks for replying quickly.
Happy coding :)

@mordechaim
Copy link

I'm having this exact issue even without ejecting. I followed the migration guide, ran react-codemod, deleted node_modules.

The compiler says the code compiled successfully but getting the red screen in the browser.

@n3tr
Copy link
Contributor

n3tr commented Nov 1, 2020

@alpeer

Upgrade React 17 and remove import React statements won't work since React doesn't do any JSX transform, you need babel plugin for that (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup).


the CRA ejection issue has been fixed in #9885 and needs to wait for the maintainer to publish a new version.

:)

@mirajhad
Copy link

use npm create-react-app my-app

@Tolu-Mals
Copy link

Tolu-Mals commented Oct 9, 2021

React version: 17.0.1

Steps To Reproduce

  1. npx create-react-app my-app
  2. cd my-app
  3. npm start (Works like a charm)
  4. npm run eject
  5. npm i
  6. npm start (ReferenceError: React is not defined)

Link to code example: https://codesandbox.io/s/ecstatic-wood-ou6px

The current behavior

I upgraded react to 17 and removed "import React"s from my project files (except index.js where react mounted). But I got "ReferenceError: React is not defined" in those files. To investigate the issue behind this, I created a new react app, the new JSX transformation was working. But when I eject, it throws the same errors. So; Without react-scripts, new JSX transformation doesn't working.

The expected behavior

Components should render without declaring React (import React from "react") if React is in scope.

I followed the steps here to reproduce the error. But everything works fine.
I did not have to do step 5 though, it ran a npm install automatically.

This means the issue isn't with create-react-app

@Leddfoot
Copy link

Can't reproduce the error here either. Second that Steps to Reproduce, step 5 is done automatically.

@safarsafarov
Copy link

npm i and npm install is the same thing tho

@nikikalwar
Copy link

Hi, I want to work on this issue, can you please assign it to me

@nikikalwar
Copy link

Hi, I checked the code and tried to reproduce the scenario but it didn't give any error so went and checked the code provided in the first post.

https://codesandbox.io/s/ecstatic-wood-ou6px?file=/src/index.js

So, the problem here is when you remove the react imports then you need to de-structure and then import the react functions as an object.

image

`import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
rootElement
);`

So, after you remove the react import statement then you have to remove the React. syntax from the code else the JSX compiler will not read the react code.
So, after removing the import the code should be changed to below:

image

`import {StrictMode} from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(


,
rootElement
);
`
Just a Note: It's not necessary to import react but the useEffect, useState, StrictMode needs to be imported .

@nikikalwar
Copy link

In simple Terms,
Import React from "react" means we are importing the React Object;
if we removed the import from React and then use <React.StrictMode> it will throw an error saying react is not defined. If you remove <React. then you will have to import Strict mode. see below:

console.log(React);
console.log(typeof React);////object
console.log(React["StrictMode"]); //since we didn't import React so React is undefined.
// undefined["some_key"] doesn't make sense right, and there's no PR required for the fix, it's expected behavior of JavaScript.

All the confusion is because React has said there's no need to import React library but we need to import everything besides import React.

@AdityaVardhanSingh
Copy link

AdityaVardhanSingh commented Aug 27, 2023

Is this issue solved?

@AjayAsnani
Copy link

is this issue solved?

@AjayAsnani
Copy link

AjayAsnani commented Nov 17, 2023

I tried all the mentioned steps and everything is working fine with my code.
Components are rendered without declaring a react statement.
After ejecting also the jsx transformation works fine.

Sample Code

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Not necessary to import react object just import the strictmode from react and everything works fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.