CODEWITHSUNDEEP
javascriptreactjswebpackreact-dom
chrispalmo
chrispalmo

Reputation: 247

__WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function

The Error:

TypeError: __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function

Modal.js:14
  11 | 
  12 | 
  13 | function Modal(props) {
> 14 |   return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
  15 | }
  16 | 
  17 |

The code:

import React from "react";
import ReactDOM from "react-dom";

const JSX_MODAL = (
  <div className="ui dimmer modals visible active">  
    <div className="ui standard modal visible active">
      THIS IS SOME TEXT IN THE MODAL // add some UI features here
    </div>
  </div>
);

function Modal(props) {
  return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
}

export default Modal;

Which is called up in the render function on another component using {Modal()}.

index.html (body section only):

<body>
  <div id="root"></div>
  <div id="modal"></div>
</body>

Dependencies:

"react": "^16.8.6
"react-dom": "^16.0.0-alpha.13",

Background:

I am trying to use React portals to render content for a modal to it's own DOM node. I was following this tutorial, which basically presents a simplified proof of concept for what is presented in the React Docs.

What I have tried:

I could only find one instance of people experiencing a similar issue, and they were able to resolve it by installing a version of React > 16.3.0. I am running React version 16.8.6.

Upvotes: 18

Views: 11646

Answers (7)

ANKIT MISHRA
ANKIT MISHRA

Reputation: 606

You might import this:-

import ReactDOM from 'react-dom/client

you have to change this import to this:-

import ReactDOM from 'react-dom

ANd then yur error will resolve

Upvotes: 0

Sumit Shrestha
Sumit Shrestha

Reputation: 396

I had similar issue, what I had was

import ReactDOM from "react";

Later, I changed it to

import ReactDOM from "react-dom";

and the issue was resolved and it worked as expected.

Upvotes: 1

Aditya Phalswal
Aditya Phalswal

Reputation: 1

I had similar problem and I use import PortalReactDOM from 'react-dom' instead of

`import ReactDOM from 'react-dom'`

and code looks like

const Loader = () => {
return PortalReactDOM.createPortal(
<div className="wrapper">
    <div className="loader">
        <img src={loaderImage} alt="Loading..." />
    </div>
</div>,
document.getElementById("loader")
 )

Upvotes: 0

Sheharyar Khan
Sheharyar Khan

Reputation: 43

I had similar problem but analyzing the problem we just have to import ReactDom from 'react-dom' itself.

import ReactDOM from 'react-dom/client'

as

import ReactDOM from 'react-dom'

this works then

Upvotes: 1

4est
4est

Reputation: 3168

In my case instead of using below:

import ReactDOM from 'react-dom/client

changed to:

import ReactDOM from 'react-dom'

and working now.

Upvotes: 3

Julian20151006
Julian20151006

Reputation: 321

I found this will work and no warnings in Chrome console:

import React from 'react'
import ReactDOM from 'react-dom/client'
import PortalReactDOM from 'react-dom'

//...

class Modal extends React.Component {
  //...

  render() {
    return PortalReactDOM.createPortal(this.props.children, this.el);
  }
}

//...
const root = ReactDOM.createRoot(appRootEl);
root.render(<Parent />);

That is, use react-dom to createPortal, and use react-dom/client to creatRoot.

Upvotes: 9

jamesthemullet
jamesthemullet

Reputation: 501

I had this error, though it was a simple fix. I had stated:

import ReactDOM from 'react';

instead of:

import ReactDOM from 'react-dom';

Although it doesn't answer the original poster's issue, it may answer for future developers.

Upvotes: 18

Related Questions