“Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`”
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
Moda
-
Some solutions are given in react-modal issue #133:
The problem lies here: Depending on when it evaluates react-modal@1.6.5:/lib/helpers/ariaAppHider.js#L1:
- document.body does not exist yet and it will resolve to
undefined || null. - if
Modal.setAppElement()is called withnullor not called at all with theplaced on(same as above). - Probably it can also happen if called with a
selectorthat does not match any results.
Solutions:
Browser Rendering:
@yachaka snippet prevents this behavior by defining the element before placing the
componentWillMount() { Modal.setAppElement('body'); }@ungoldman answer, if you don't want to depend on `setAppElement':
Inject the bundled application JS into
instead of.
Though ideallyreact-modalshould 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. - document.body does not exist yet and it will resolve to
加载中...
- 热议问题