React-modal: Error: You must set an element with `Modal.setAppElement(el)` to make this accessible

Created on 2 Mar 2016 · 19Comments · Source: reactjs/react-modal

I get error, but CHANGELOG says:

v0.5.0 - Tue, 22 Sep 2015 19:19:44 GMT
[changed] setAppElement method is now optional.

So I'm confused.

Error: react-modal: You must set an element with Modal.setAppElement(el) to make this accessible
at validateElement (index.js:224)
at show (index.js:211)
at Object.toggle (index.js:219)

bug documentation

Source

vonwao

Most helpful comment

Hello,

Same problem here.
The whole problem is the scripts being loaded at the top of the page. react-modal was trying to set the app element to document.body, while it doesn't exist yet. If you did the same, within your code, it resulted as the same as your script was probably loaded before the DOM too.

I solved it by calling it in the lifecycle method componentWillMount:

componentDidMount() {
    Modal.setAppElement('body');
 },

I can create a pull request solving this issue if you wish to?

Updated 05/11/18: Use componentDidMount as componentWillMount is flagged as deprecated.

yachaka on 9 Mar 2016

👍79 🎉19 ❤14 😄7 👎7 🚀1

All 19 comments

Same problem here

zires on 4 Mar 2016

Hello,

I solved it by calling it in the lifecycle method componentWillMount:

componentDidMount() {
    Modal.setAppElement('body');
 },

I can create a pull request solving this issue if you wish to?

Updated 05/11/18: Use componentDidMount as componentWillMount is flagged as deprecated.

yachaka on 9 Mar 2016

👍79 🎉19 ❤14 😄7 👎7 🚀1

woah, what? that should not be optional, that's the whole point of this library.

ryanflorence on 13 Mar 2016

👍9

Thank you @yachaka for that snippet, solved my issue. I ran into this when running tests, fwiw.

stkrzysiak on 16 Mar 2016

@ryanflorence The doc is precising that by default react-modal is anchored to document.body, which would be fine:

/*
By default the modal is anchored to document.body. All of the following overrides are available.

* element
Modal.setAppElement(appElement);

* query selector - uses the first element found if you pass in a class.
Modal.setAppElement('#your-app-element');

*/

I guess the doc/or the code has to change?

yachaka on 17 Mar 2016

I only got this error when we switched to using webpack-dev-server. Very weird.

ungoldman on 7 Apr 2016

👍3

Update: injecting the bundled application JS into <body> instead of <head> seems to have solved it for me for now, but I think ideally react-modal should wait until the DOM is loaded to try attaching to document.body (if that's what's going on).

ungoldman on 7 Apr 2016

👍7

The appElement is only used in one place: https://github.com/reactjs/react-modal/blob/master/lib/components/Modal.js#L75, and isn't documented at all. I think that line should be using the closed over appElement variable instead. The fact that you can set the app element in two different ways, and they are both used seems wrong.

RobinClowers on 6 May 2016

This happened for me when moving to webpack. It was working fine before. I don't understand it but adding the componentWillMount snippet fixed it for me as well.

radixhound on 15 Jul 2016

I'm having this too.
yachaka's advice doesn't work because on server-side there's no document.
ungoldman's advice does work — moving javascript to <body/> tag makes the error go away, but this is a bug, and it should wait for the DOM content to load.

catamphetamine on 7 Dec 2016

👍1

I got this problem too, like ungoldman, when we started building/running with webpack. No one's advice was helping. We have a 'common' project, which had the code that was using react-modal, and was deployed to the main app project. I had to move the modal code to the main app project to get it to work.

figandbones on 12 May 2017

👍2

Depending on when it evaluates [email protected]:/lib/helpers/ariaAppHider.js#L1:

document.body does not exist yet and it will resolve to undefined || null.
if Modal.setAppElement() is called with null or not called at all with the <script /> placed on <head /> (same as above).
Probably it can also happen if called with a selector that does not match any results.

browser rendering

If you don't want to depend on setAppElement(), @ungoldman answer is correct .

@yachaka snippet prevents this behavior by defining the element before placing the <Modal />.

server-side

If rendering on server-side, @halt-hammerzeit is correct and you must provide a document.body, before requiring the modal script (perhaps it should be preferable to use setAppElement() in this case).

Too late to help, but I hope new users can understand what is going on if they face this issue.

diasbruno on 24 Jun 2017

👍2 😄1

I started getting this error/warning yesterday after upgrading my react-modal and react libs to the latest versions. To make the error/warning go away, I modified my main .jsx file to include an explicit call to Modal.setAppElement( ) like this:

// Weird-- we get warnings in the console if we don't explicitly set the Modal appElement...
Modal.setAppElement('body');

ReactDOM.render(myAppBody, document.getElementById('index-main-div'));

And yes, my Javascript is a child of the HTML body, as suggested by @ungoldman...

<html>
...
...
    <body>
        <div id="index-main-div"></div>

        <script src="./js/myapp.js"></script>
    </body>
</html>

royrwood on 6 Dec 2017

👍4

<ReactModal
        appElement={document.getElementById('app')}
...

FYI This also works.

daithimorton on 28 Feb 2018

@damorton Not, it doesn't.
There's no document on the server.

catamphetamine on 28 Feb 2018

🚀2 👎1

document && document.getElementById('#app') && ReactModal.setAppElement('#app');

yantakus on 19 Apr 2018

👍2

Is the following possible with react-modal, if the modal is used within a component only, can it be mounted such that the overlay covers only that component - and not parent / grandparents of that component ? I tried it, it didn't seem to work, it went back to covering the whole screen.