ReactJS - TypeError: Cannot read properties of undefined (reading 'createPortal') - Why?

Question

I am getting the following error when trying to display the modal:

My code is the following:

What i am doing wrong?

Answer 1

The mistake is in import statment.

Replace

import {ReactDOM} from 'react-dom'

with

import ReactDOM from "react-dom" 

Reason : As there is no named export of ReactDOM from "react-dom", it is not imported and the reference will be undefined. So, you are getting the error. ReactDOM is default export.

Answer 2

For react v18 and above the import statement does have client included

so replacing

import {ReactDOM} from 'react-dom'

with

import ReactDOM from 'react-dom/client';

is advised as per docs on react portals