react-bootstrap/react-overlays

Modal throws "Element type is invalid" error

jamiller619 opened this issue · 2 comments

jamiller619 commented

Describe the bug

When trying to use Modal from "react-overlays/Modal", this error is thrown:

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, or you might have mixed up default and named imports.

To Reproduce

Steps to reproduce the behavior:

Import modal, and try to use it. Also can look at the extremely minimal example below.

Reproducible Example

https://codesandbox.io/s/silly-cori-oypz2?file=/src/App.js

Expected behavior

Modal should work

Environment (please complete the following information)

  • Operating System: WSL v2 (Ubutu 16.04) on Windows
  • Browser, Version Chrome 89.0.4389
  • react-overlays Version 5.0.0
jamiller619 commented

It appears something is missing in the docs? It's confusing because I can't get this to work with any version of react-overlays, they all throw the same error.

kyletsang commented

You need to wrap your modal content with an element or component.

<Modal show={show} onHide={() => setShow(false)}>
  <div>Testing</div>
</Modal>
  • 👍1