ReactDOM.createRoot can't mount the component into DOM

Question

I 'm debugging the react source code, everything is fine until I adopting concurrent mode. When I use ReactDOM.createRoot like this:

import React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import App from './App';

/*ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);*/

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

console.log('React Version：' + React.version);

The App component can't mount into DOM, no errors and warnings in console, but ReactDOM.render is fine.

enter image description here

the repository is https://github.com/neroneroffy/react-source-code-v16.13.0

you can clone and run by npm install && npm start

Any help will be appreciated

score 0 · Answer 1 · answered Mar 29 '22 at 18:23

You're importing createRoot from "react-dom" which is not supported. Import it from "react-dom/client".

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

// Create a root.
const root = ReactDOM.createRoot(document.getElementById("root"));

// Initial render
root.render(<App />);

ReactDOM.createRoot can't mount the component into DOM

1 Answers1