Modal Form: react__WEBPACK_IMPORTED_MODULE_0__.createPortal is not a function

Question

I'm working on shopping Cart app, I want to use a Modal Form to display the cart's content and additional options before place the order, that's why I'm using Portals, so far, the source code of my Modal.js looks like this:

import { Fragment } from 'react';
import ReactDOM from 'react';
//import ReactDOM from 'react-dom/client';

import classes from './Modal.module.css';

const Backdrop = (props) => {
  return <div className={classes.backdrop} onClick={props.onClose}/>;
};

const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

const portalElement = document.getElementById('overlays');

const Modal = (props) => {
  return (
    <Fragment>
      {ReactDOM.createPortal(<Backdrop onClose={props.onClose} />, portalElement)}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
    </Fragment>
  );
};

export default Modal;

When I tried to load the modal form -clicking on an icon- I get this error:

This is the React's version I'm using:

This code used to work on previous version of React (17.x), the weird thing I tried to downgrade but still getting the same error.

My questions are:

1. In ver 18.x of React, Portals have been changed?
2. How can I downgrade React properly in order to test my code?
3. do you have any other suggestions how to overcome this issue using React's 18?

Thanks a lot

Answer 1

I had same error and I solved by importing

import ReactDOM from 'react-dom';

instead of

import ReactDOM from 'react-dom/client';