Warning: react-modal: App element is not defined.

[StokeMasterJack]

I upgraded my yarn version and re-ran yarn install. And now I am getting this warning.

It's strange, because nothing in my code has changed. Something in node_modules is obviously different but who knows what. I can't do a diff on node_modules because that was never check in to git.

[diasbruno]

@StokeMasterJack we made some changes recently to api to define the app element. Can you get the log message you got?

[diasbruno]

Can you check if setting Modal.setAppElement the error goes away?

Ref: https://github.com/reactjs/react-modal#app-element

[StokeMasterJack]

Here is the exact log message:

Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el}. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting ariaHideApp={false}.

[diasbruno]

Oh sorry, thought it was an error. This is related to this change #570. This is a reminder that not setting the app element will/can cause accessibility issues.

[diasbruno]

So, you need to explicit tell the modal that you don't want to use the app element with ariaHideApp={false} (if that's your case).

[diasbruno]

I'll keep this open. Documentation is missing for this behavior.

[dlong500]

Can this feature be explained a bit more? When I try to use it I'm getting an error like so:
ReferenceError: document is not defined coming from ariaAppHider.js

Also, is there a reason this configuration can't be encapsulated into the Modal props and must use Modal.setAppElement? How are you supposed to handle the feature given multiple Modals throughout a large app in various components? Is it just one global setting that affects all Modals?

[dlong500]

Ah, I think the issue was my server rendering of the app. Once I wrapped the setAppElement call in a check to make sure it was in a client/browser environment then it appears to run OK.

I'm a still a bit unsure if things are working properly though especially because the docs state "If you are doing server-side rendering, you should use this property". That doesn't seem to make sense to me because the DOM is not even available at that point yet.

[diasbruno]

@dlong500 The documentation related to this is outdated. Also, we need to tests how the modal will work on a SSR environment. I did some tests to get it working, but very superficial - just to make it work.

For the multiple modal case, you can use appElement attribute.