React-modal: React.createElement: type is invalid

[jrock17]

Summary:

When upgrading to 2.x, any page with a modal reference throws this error:
warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I am using ES5.

Steps to reproduce:

1. Upgrade to 2.2.0
2. Load page with modal

Expected behavior:

Pages loaded previously with 1.9.7 and work again if I roll back to 1.9.7.

Additional notes:

Everything returns to normal when rolling back to 1.9.7

[diasbruno]

Hi @jrock17, can you get more info on this errors? Hope you can find more info on the stacktrace...

[eduardobc88]

You need put .default for use it.
Modal = (require 'react-modal').default

[im1dermike]

I'm getting the same error and I'm unclear how this or related threads can resolve what I'm seeing. I currently have version 3.1.2 installed. Here is my (simplified) code:

import * as React from "react";
import Modal from "react-modal";

export interface DeleteModalProps {
  isModalOpen: boolean;
  onCloseModal: () => any;
  onDeleteClick: () => any;
}

export const DeleteModal: React.SFC<DeleteModalProps> = (props) => {
  const { isModalOpen, onCloseModal } = props;
  return (
    <div>
      <Modal className="modal hide fade warning"
        isOpen={isModalOpen}
        onRequestClose={onCloseModal}
        contentLabel="Example Modal">
        <div>Modal Contents</div>
      </Modal>
    </div>
  );
}

I get this exception:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

[im1dermike]

It appears switching to import * as Modal from "react-modal"; worked for me.