Semantic-UI-React: Modal relies on document as default renderNode, breaks SSR

Line 117 of Modal.js uses document as the mount node if this.props.mountNode is absent. Thus if you don’t specify mountNode, server-side rendering fails because there is no document.

Modal.js:117

The only workaround I can figure out is to track if the parent component has been mounted with a manually set this.state.hasMounted and then only render the Modal after componentDidMount has run. This makes the markup awkward and adds complexity.

Is there another option? Could Modal.js guard against trying to use document when it’s not defined? Couldn’t it just default to rendering in its parent like other components?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17 (13 by maintainers)

Most upvoted comments

@strues The easiest way to get around this is to render on the client.

Example:

import React from 'react';
import { Header, Icon, Modal } from 'semantic-ui-react';

class Test extends React.Component {
  state = {
    isMounted: false
  };

  componentDidMount() {
    this.setState({isMounted: true});
  };

  render() {
    return (
        <div>
          {
            this.state.isMounted &&
            <Modal trigger={<button className="ui primary button">Open Modal</button>}>
              This works
            </Modal>
          }
        </div>
    )
  }
}

dcurletti on Nov 3, 2016