CODEWITHSUNDEEP
node.jsexpressreactjsreact-router
ericn
ericn

Reputation: 13103

React server side rendering ReferenceError: document is not defined

The relevant library is react-modal but this could potentially happen to many other libraries. How do I deal with this?
server.js 

import express from 'express';
import React from 'react';
import { match, RoutingContext } from 'react-router';
import routes from './routes';

var app = express();
app.get('/*', function (req, res) {
   console.log(req.url);
   match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
       console.log('renderProps is '+renderProps);
       if (error) {
           console.log('error');
           res.send(500, error.message)
       } else if (redirectLocation) {
           console.log('redirect');
           res.redirect(302, redirectLocation.pathname + redirectLocation.search)
       } else if (renderProps) {
           console.log('ok - ');
           let htmlStr = React.renderToString(<RoutingContext {...renderProps} />)
           console.log('html string response '+htmlStr);
           res.render('layout', { reactHtml: htmlStr });
       } else {
           console.log('not found')
           res.send(404, 'Not found')
       }
   })
});

app.listen(process.env.PORT || 3000);

routes.js 

import React from 'react';

var routes = [];
routes.push({path: '/articles/:id', component: GenericPage, params: {pageType: 'article'}});
routes.push({path: '/:id', component: GenericPage, params: {pageType: 'generic'}});
// routes.push({path: '*', component: NotFound});

var routeConfig = [
    {
        path: '/',
        component: AfApp,
        indexRoute: {component: Homepage},
        childRoutes: routes
    }
];

export default routeConfig;

I'm using react 0.13.3, react-router 1.0.0

/Users/eric/af/frontend_app/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/eric/af/frontend_app/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/eric/af/frontend_app/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 Module.require (module.js:365:17)
        at require (module.js:384:17)
        at Object.<anonymous> (/Users/eric/af/frontend_app/node_modules/react-modal/lib/components/Modal.js:4:20)
        at Module._compile (module.js:460:26)

Upvotes: 1

Views: 5318

Answers (1)

ericn
ericn

Reputation: 13103

I've come to the conclusion that I need to use change the libraries and that are friendly with Node JS and compatible with React 0.13.x, no magic unfortunately.

Alternatively, one can wrap any function call to server-unfriendly Javascript libraries with the check whether it's browser environment:
if (typeof window !== 'undefined') { // it's safe to call server-unfriendly libraries here }

Upvotes: 3

Related Questions