Server-side rendering with React.js

Question

I cannot manage to render my semantic with Reactjs server side. It works without semantic, thus no problem with my react server side code. Server crashes and gives the beginning lines of error:

/Users/isik/Dev/portfolio/reactjs-server-side-rendering/node_modules/semantic-ui-dropdown/index.js:3443
})( require("jquery"), window, document );
                       ^

ReferenceError: window is not defined

I have jquery insatlled with npm. And also lastly tried installing jsdom version jsdom@3.1.2. None worked.

I use Recipes-Server-side rendering in semantic-ui webpage.

the code I use for my server side component is as follows:

var React = require('react');
var jquery = require('jquery');
var dropdown = require('semantic-ui-dropdown');

// Can use JSX too
var Component = React.createClass({
    componentDidMount: function () {
        $('.ui.dropdown').dropdown();
    },
    componentDidUpdate: function () {
        $('.ui.dropdown').dropdown('refresh');
    },
    render: function(){
        return(
                <div className="ui selection dropdown">
                    <input type="hidden" name="gender"/>
                    <i className="dropdown icon"></i>
                    <div className="default text">Gender</div>
                    <div className="menu">
                        <div className="item" data-value="1">Male</div>
                        <div className="item" data-value="0">Female</div>
                    </div>
                </div>
        );
    }
});

module.exports.Component = Component;

Is that a general known issue with the server-side rendering with semantic-ui or I am doing it wrong?

Answer 1

Try this:

componentDidMount: function () {
    var dropdown = require('semantic-ui-dropdown');
    $('.ui.dropdown').dropdown();
},

I think that calling require('semantic-ui-dropdown') requires to have an existing window initialized in the DOM

And remove the actual require('semantic-ui-dropdown') from the top of your file