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

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 2

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 [email protected] [email protected]

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

npm install [email protected] [email protected]

After that,

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

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