Reactstrap: Modal Component "__WEBPACK_IMPORTED_MODULE_5_react_dom___default.a.createPortal is not a function"

Created on 22 May 2018  路  3Comments  路  Source: reactstrap/reactstrap

Issue description

  • components: Modal
  • reactstrap version #^5.0.0

  • react version #^15.6.2

  • bootstrap version #^4.0.0

I get an error when I want to add "modal" to the page

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class ModalWindow extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        modal: false
      };
    this.ac = this.ac.bind(this);
  }

  ac() {
     this.setState({
        modal: !this.state.modal
     });


  }

  render() {

    return (
      <div>
        <Button color="danger" onClick={this.ac}>Sayfa a莽</Button>
        <Modal isOpen={this.state.modal} toggle={this.ac}>
          <ModalHeader>Modal title</ModalHeader>
          <ModalBody>
            Test
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.ac}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.ac}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalWindow;

Error

__WEBPACK_IMPORTED_MODULE_5_react_dom___default.a.createPortal is not a function
    at Portal.render (reactstrap.es.js:3721)
    at ReactCompositeComponent.js:794
    at measureLifeCyclePerf (ReactCompositeComponent.js:74)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:793)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:820)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:360)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:256)
    at Object.mountComponent (ReactReconciler.js:44)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:762)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:721)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:643)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:545)
    at Object.receiveComponent (ReactReconciler.js:122)
    at Object.updateChildren (ReactChildReconciler.js:108)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:205)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:309)

Most helpful comment

You need react 16 to use reactstrap v5. It's a fairly painless upgrade from react 15 to react 16 (especially since you are not using proptypes) so it should just drop right in.

All 3 comments

You need react 16 to use reactstrap v5. It's a fairly painless upgrade from react 15 to react 16 (especially since you are not using proptypes) so it should just drop right in.

I have same problem,
"react": "^16.4.1",
"reactstrap": "^6.3.0",

react and react-dom both need to be updated.

Was this page helpful?
0 / 5 - 0 ratings