"Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`"
Solution 1
Some solutions are given in react-modal issue #133:
The problem lies here: 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 withnull
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.
Solutions:
Browser Rendering:
@yachaka snippet prevents this behavior by defining the element before placing the <Modal />
:
componentWillMount() {
Modal.setAppElement('body');
}
@ungoldman answer, if you don't want to depend on `setAppElement':
Inject the bundled application JS into
<body>
instead of<head>
.
Though ideallyreact-modal
should wait until the DOM is loaded to try attaching todocument.body
.
server-side:
If rendering on server-side, you must provide a
document.body
, before requiring the modal script (perhaps it should be preferable to usesetAppElement()
in this case).
Update:
react docs have been updated to include the information above, so they should now be clearer for users running into this issue.
react-modal issue #567: add information (from issue #133 linked above) to the docs.
Solution 2
Add ariaHideApp={false}
to Modal
attributes.
This should work:
<Modal isOpen={!!props.selectedOption}
onRequestClose={props.clearSelectedOption}
ariaHideApp={false}
contentLabel="Selected Option"
>
</Modal>
Solution 3
Just include appElement={document.getElementById('app')}
inside your modal like this
<Modal
className="modal"
appElement={document.getElementById('app')}
>
It will work 100% if app is your central in index.html from where react loads.
Solution 4
This is my TypeScript Modal
component which wraps react-modal
v3.8.1:
import React from 'react'
import ReactModal from 'react-modal'
interface Props {
isOpen: boolean
ariaLabel?: string
}
const Modal: React.FC<Props> = ({
children,
ariaLabel = 'Alert Modal',
isOpen,
}) => (
<ReactModal
appElement={document.getElementById('root') as HTMLElement}
ariaHideApp={process.env.NODE_ENV !== 'test'}
isOpen={isOpen}
contentLabel={ariaLabel}
testId="modal-content"
>
{children}
</ReactModal>
)
export default Modal
Usage in component with state = { isOpen: true }
:
<Modal isOpen={this.state.isOpen}>
<p>
Modal Content here…
</p>
<button onClick={() => { this.setState({ isOpen: false }) }}>Okay</button>
</Modal>
Solution 5
If getting the Warning: react-modal: App element is not defined...
error when running tests (we were running Jest), you can suppress the warnings by adding the following to your test file:
import ReactModal from 'react-modal';
ReactModal.setAppElement('*'); // suppresses modal-related test warnings.
![SherylHohman](https://i.stack.imgur.com/Z0g8T.png?s=256&g=1)
SherylHohman
JavaScript, React.js, React-Redux, React Native, node.js, git, bash Also: Python 3, Deep Learning, TensorFlow, Keras, numpy, Jupyter notebook, php, wordpress Hartman Products: Vice President, CTO With a keen interest in education I have TA'd for: Hack Reactor Core Telegraph Academy Software Engineering Intensive Prep Course, Rio Vista Library, CSU Sacramento SO ready to help.
Updated on December 23, 2021Comments
-
SherylHohman over 2 years
How to fix this warning in console of a React app using the react-modal package:
Warning: react-modal: App element is not defined. Please use
Modal.setAppElement(el)
or setappElement={el}
I have not been successful at figuring out what
el
is supposed to be.Context: in my App.js root component file:
... import Modal from 'react-modal'; ... class App extends Component { ... render(){ ... <Modal className="modal" overlayClassName="overlay" isOpen={foodModalOpen} onRequestClose={this.closeFoodModal} contentLabel="Modal" > ... } }
Where
...
indicates code not shown.Everything works fine, but when the Modal is opened, the following Warning appears in my console:
index.js:2177 Warning: react-modal: App element is not defined. Please use
Modal.setAppElement(el)
or setappElement={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 settingariaHideApp={false}
.In the react-modal docs all I can find is the following:
App Element The app element allows you to specify the portion of your app that should be hidden (via aria-hidden) to prevent assistive technologies such as screenreaders from reading content outside of the content of your modal.
If you are doing server-side rendering, you should use this property.
It can be specified in the following ways:
DOMElement
Modal.setAppElement(appElement);
query selector - uses the first element found if you pass in a class.
Modal.setAppElement('#your-app-element');
Unfortunately, this has not helped ! I cannot figure out what
el
is supposed to represent.Here are some of the many property variations I have tried adding to my Modal component:
`appElement={el}`, `appElement="root"` where `root` is the id that my App component is injected into `appElement={'root'}` `appElement="div"`, `appElement={<div>}`, `appElement={"div"}`
I've also tried calling
Modal.setAppElement('root');
from insidesrc/index.js
, whereroot
is the root element that myApp
component is injected into, and index.js is where I do that.