1

May be a stupid question.

import {ReactDOM} from 'react-dom/client'; // or import {ReactDOM as ReactDOM} are BAD
...
const root = ReactDOM.createRoot(document.getElementById("root"));

received error:

export 'ReactDOM' (imported as 'ReactDOM') was not found in 'react-dom/client' (possible exports: createRoot, hydrateRoot)

OK only import ReactDOM from 'react-dom/client'; This is different from this post

Jeb50
  • 6,272
  • 6
  • 49
  • 87

3 Answers3

3

Apologies if I'm misunderstanding the question, but assuming I'm on point, the difference is how they are exported from the package.

ReactDOM is export default whereas the others (createRoot, hydrateRoot) are export only.

For more info: `export const` vs. `export default` in ES6

(and based on the fact that post has over 290 upvotes - not a silly question at all)

John Detlefs
  • 952
  • 8
  • 16
0

Simply use :

import * as ReactDOM from 'react-dom/client'

as this is current syntax to import it .

Harsh Mangalam
  • 1,116
  • 1
  • 10
  • 19
Mahe Pawar
  • 1
  • 1
0

To fix the issue, simply modify your import statement for createRoot to look like this:

import { createRoot } from 'react-dom/client';

Your code Should be like:

import {createRoot} from 'react-dom/client';
const root = createRoot(document.getElementById("root"));
Nader_B
  • 11
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 18 '23 at 21:55