“Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`”

How do I 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 set appElement={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 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}.

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 inside src/index.js, where root is the root element that my App component is injected into, and index.js is where I do that.

Answer

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 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.

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 ideally react-modal should wait until the DOM is loaded to try attaching to document.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 use setAppElement() 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.

Advertisement

Answer

Solutions:

Browser Rendering:

server-side: