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

[eriknyk]

I have not errors, just it doesn't works

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.

[mzabriskie]

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

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

[mammut]

They discuss about it here:

#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?

[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?

[staminaloops]

I didn't try it yet, but it seems that a PR was merged: #70
:)

[kilianc]

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