React-modal: What if I render DOM using server side react?

[ghost]

// And when using document to get the dom element, server side won't support "document" object for the following code:
Modal.setAppElement(el);
Modal.injectCSS();

// I have also tried the following but It will prompt me about I need to insert element in that area
let el = React.findDOMNode(this.refs.cdrExportModal)
console.info('el', el)
Modal.setAppElement(el);
Modal.injectCSS();

Please help!

[mammut]

They discuss about it here:

https://github.com/rackt/react-modal/issues/15

but the Modal.injectCSS() still gave me problems, so I ended up doing this:

var React = require('react');
var Modal = require('react-modal');
var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

if (ExecutionEnvironment.canUseDOM) {
  Modal.injectCSS();
  Modal.setAppElement(document.getElementById('react-app'));
}
...

The server stopped crashing and it works on the frontend.

[eriknyk]

Hi,

I tried something like this,

import React, { Component, PropTypes } from 'react';

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Modal = require('react-modal');

export default class Emails extends Component {    
    constructor(props, context) {
        super(props, context);

        this.state = {
            modalOpen: false
        };
    }

    componentDidMount () {
    ​    var appElement = React.findDOMNode(this);

        Modal.setAppElement(appElement);
        Modal.injectCSS();
    }

    render () {
        return (
            <div>
                <Modal
                        isOpen={this.state.modalOpen}
                        onRequestClose={this.closeModal}
                        >
                        <h2>Hello</h2>
                        <button onClick={this.closeModal}>close</button>
                        <div>I am a modal</div>
                        <form>
                            <input />
                            <button>tab navigation</button>
                            <button>stays</button>
                            <button>inside</button>
                            <button>the modal</button>
                        </form>
                    </Modal>
            </div>);
    }

    openModal() {
        this.state = {
            modalOpen: true
        };
    }

    closeModal() {
        this.state = {
            modalOpen: false
        };
    }

    getStoreState () {
        return {
            modalOpen: this.context.getStore(EmailsStore).isModalOpen()
        };
    }
}

but still it doesn't works,..
Any other suggestion to make it works on a isomorphic app?

Regards.

[mzabriskie]

@eriknyk what is the error that you get with your code?

[eriknyk]

I have not errors, just it doesn't works

[pwmckenna]

this happens just trying to run webpacked code server side:

/Users/patrickwilliams/git/frontend-home-profile/node_modules/react-modal/lib/helpers/ariaAppHider.js:1
 (exports, require, module, __filename, __dirname) { var _element = document.b
                                                                    ^
ReferenceError: document is not defined
    at Object.<anonymous> (/Users/patrickwilliams/git/frontend-home-profile/node_modules/react-modal/lib/helpers/ariaAppHider.js:1:78)
    at Module._compile (module.js:460:26)
    at Module._extensions..js (module.js:478:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/patrickwilliams/git/frontend-home-profile/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.cls_wrapMethod (/Users/patrickwilliams/git/frontend-home-profile/node_modules/newrelic/lib/shimmer.js:230:38)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/patrickwilliams/git/frontend-home-profile/node_modules/react-modal/lib/components/Modal.js:4:20)

[staminaloops]

Same error. Even with

var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

if (ExecutionEnvironment.canUseDOM) {
Modal.injectCSS();
Modal.setAppElement(document.getElementById('react-app'));
}
...

We are using server side rendering, so yes, document it's not defined on server.
I think it's a priority fixing this, since many of us are using server side rendering :)

[nhatquang238]

+1 for the same error on server side rendering. Would really love a fix for this.

[shilpam]

+1. Running into same issue on server side rendering

[shaharyakir]

+1 for same error with server side rendering.

[kalasjocke]

+1 over here for supporting server side rendering.

If you need a short term solution you can downgrade to 0.3.0 which supports server side rendering.

[eriknyk]

at the end I make it works, but without any styles,.. seems Modal.injectCSS(); is not working as expected or I need to add some stylesheets manually?

[ghost]

This has been open for quite some time. Given the amount of people struggling with isomorphic rendering it's perhaps worth mentioning this library works client-side only in the project README.md.

[staminaloops]

I didn't try it yet, but it seems that a PR was merged: https://github.com/rackt/react-modal/pull/70
:)

[mzabriskie]

Server side rendering should be working with [email protected]. Let me know if you have any issues.

[kilianc]

@mzabriskie can you be more specific, I am still experiencing this, what changed and is there an example somewhere I can look at?

[kilianc]

Just be clear, it doesn't throw any error, it just doesn't render the modal and I can't find any examples that show how to change the mount-point in a server-side compatible manner.