Server-side rendering with React.js

[fselcukcan]

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 [email protected]. 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 genral known issue with the server-side rendering with semantic-ui or I am doing it wrong?

[sebradloff]

Did you end up fixing this issue? I'm running into the same problem.

[mcrawshaw]

I have it working, but I only require JS files in my client code. For the pages I wish SSR to work I manually add the CSS files to ensure I get a reasonable initial render.

let styleModal = require('!!isomorphic-style!css?modules=false!../../../semantic/dist/components/modal.css');

For most components this should provide enough for initial render. You will probably have to make the jquery calls in componentDidMount and componentDidUpdate only on the client.

Hope this helps!

[reecelong]

@jlukic Can you provide some input on this issue? I'm also experiencing it when attempting to render my components within a unit test. Seems to render properly in the browser for me, but whenever I utilize server-side rendering, it cannot seem to find jQuery.

SO question referencing the issue that I'm experiencing:
http://stackoverflow.com/questions/39800957/how-do-i-properly-mock-third-party-libraries-like-jquery-and-semantic-ui-using

[eric-infinata]

@isikfsc, try requiring your semantic.min.js file in your client-side entrypoint.

require('./semantic/dist/semantic.min');

I had the same issue and this resolved it.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[mcrawshaw]

Use semantic-ui-react, it doesn't use jquery at all.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.