setAppElement from react-modal

Hi everybody,

I have integrated react-image-lightbox however I have the following error message: “Uncaught Error: react-modal: You must set an element with Modal.setAppElement(el) to make this accessible”

Anyone know how could I fix it? I am using “react-modal”: “^1.3.0” dependency.

Thanks a lot for your help.

[malroc]

Same issue. This is a known bug in react-modal: https://github.com/reactjs/react-modal/issues/133 The workaround helped, but since react-image-lightbox relies on react-modal and calls it implicitly, it isn’t just a “react-modal usage issue”, it is a react-image-lightbox issue too.

[kumekay]

I experienced this issue using webpack. More details on this issue https://github.com/reactjs/react-modal/issues/133

I worked around it by adding

import Modal from 'react-modal';

   componentWillMount() {
        Modal.setAppElement('body');
    }

Full example

import React, {Component} from 'react';
import Lightbox from 'react-image-lightbox';
import Modal from 'react-modal';

const images = [
    '//placekitten.com/1500/500',
    '//placekitten.com/4000/3000',
    '//placekitten.com/800/1200',
    '//placekitten.com/1500/1500'
];

export default class Gallery extends Component {
    constructor(props) {
        super(props);

        this.state = {
            photoIndex: 0,
            isOpen: false
        };
    }

    componentWillMount() {
        Modal.setAppElement('body');
    }

    render() {
        const {
            photoIndex,
            isOpen
        } = this.state;

        return (
            <div>
                <button
                    type="button"
                    onClick={() => this.setState({isOpen: true})}
                >
                    Open Lightbox
                </button>

                {isOpen &&
                <Lightbox
                    mainSrc={images[photoIndex]}
                    nextSrc={images[(photoIndex + 1) % images.length]}
                    prevSrc={images[(photoIndex + images.length - 1) % images.length]}

                    onCloseRequest={() => this.setState({isOpen: false})}
                    onMovePrevRequest={() => this.setState({
                        photoIndex: (photoIndex + images.length - 1) % images.length,
                    })}
                    onMoveNextRequest={() => this.setState({
                        photoIndex: (photoIndex + 1) % images.length,
                    })}
                />
                }
            </div>
        );
    }
}