Menu
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.
929
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.
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
