CODEWITHSUNDEEP
reactjsjsxreact-suspense
Ahsan Shakeel
Ahsan Shakeel

Reputation: 11

React Suspense Concurrent Mode Not Working

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

Upvotes: 0

Views: 4526

Answers (4)

Rolazar
Rolazar

Reputation: 330

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 />);

Upvotes: 0

Redak BOY
Redak BOY

Reputation: 11

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

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

Upvotes: 0

Itay Barr
Itay Barr

Reputation: 31

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.

Upvotes: 3

Lucas Matos
Lucas Matos

Reputation: 2918

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 />);

Upvotes: 1

Related Questions