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

[alpeer]

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]

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

[alpeer]

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]

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]

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

:)

[MdMirajAnsari]

use npm create-react-app my-app

[Tolu-Mals]

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]

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

[safarsafarov]

npm i and npm install is the same thing tho

[nikikalwar]

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

[nikikalwar]

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.

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

import App from "./App";

const rootElement = document.getElementById("root"); ReactDOM.render( <React.StrictMode> <App /> </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:

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

import App from "./App";

const rootElement = document.getElementById("root"); ReactDOM.render( <StrictMode> <App /> </StrictMode>, rootElement ); ` Just a Note: It's not necessary to import react but the useEffect, useState, StrictMode needs to be imported .

[nikikalwar]

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]

Is this issue solved?

[AjayAsnani]

is this issue solved?

[AjayAsnani]

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.