React Suspense Concurrent Mode Not Working

Question

I am trying to use react suspense but I am facing some issue regarding rendering after making changes in react index.js file and I already installed react suspense "npm install react@experimental react-dom@experimental"

My index.js file

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

Index.js file

Error

TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createRoot is not a function

Error Image

Answer 1

To anyone updating an old React App, the React support doc on React 18 says to write ONLY:

npm install react react-dom

for the React 18 update. I had two React 16 apps I wanted to update.

To do so, I first updated to React 17:

npm install react@17.0.0 react-dom@17.0.0

ONLY AFTER this version is installed properly, you are able to install to 18, specifying the version in the installation command:

npm install react@18.0.0 react-dom@18.0.0

After that,

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

works just fine. Follow the version update on your 'package,json' file.

Answer 2

In order to works is required to use ReactDOM.unstable_createRoot

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);

Answer 3

change -> import ReactDOM from "react-dom";

to -> import ReactDOM from "react-dom/client";

Answer 4

The function createRoot is from react-dom/client. You can try the named import like this:

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

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