ReactJS Serverside rendering with Node

Question

I have followed the tutorial found here:

https://blog.frankdejonge.nl/rendering-reactjs-templates-server-side/

In my server.js:

'use strict';

require("babel/register");
var React = require('react');
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var app = express();
app.use(bodyParser.json());
app.use('/', function(req, res) {
    try {
        var view = path.resolve('public/src/' + req.query.module);
        var component = require(view);
        var props = req.body || null;
        res.status(200).send(
            React.renderToString(
                React.createElement(component, props)
            )
        );
    } catch (err) {
        res.status(500).send(err.message);
    }
});

app.listen(3000);
console.log('Listening carefully...')

But when I run it I get Cannot find module 'babel/register'

If I comment that out, it works, but I get the following in the browser:

Unexpected token import

I'm guessing this is due to the error.

How can I fix this?

I changed it to this:

require('babel-register')({
    presets: ['es2015', 'react']
});
...

Which got it a bit further, but now in my browser I am getting:

React.renderToString is not a function

My component:

import React from 'react';

class HelloComponent extends React.Component {
    render () {
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
}

HelloComponent.defaultProps = { name: 'World' };

export default HelloComponent;

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

The proper syntax for babel register seems different now: use require("babel-register"); after having installed babel.

see require('babel/register') doesn't work : it is a similar issue

edited May 23 '17 at 12:23

Community

1
1

answered May 17 '16 at 13:16

Damien Leroux

11,177
7
43
57

score 0 · Accepted Answer · answered May 17 '16 at 13:20

0

Looks like this code is using BabelJS version 5 - so when you will install babel@5 - it should work.

But maybe it would be better if you replace require("babel/register"); with require("babel-register"); and use babel@6. Also, you will need to add .babelrc file with configuration for babeljs (https://babeljs.io/docs/usage/babelrc/).

If you are looking to ready to use configuration for server-side rendering for react components - take a look at this project: https://github.com/zxbodya/reactive-widgets (I am an author).

It is a bit more than just server side rendering - it is a complete solution that will allow you to build isomorphic js components for your PHP application.

answered May 17 '16 at 13:20

Bogdan Savluk

6,274
1
30
36

1

It is because in react 0.14 this functionality was moved to separate package react-dom (https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html). – Bogdan Savluk May 17 '16 at 13:33
How can I get it to work with what I have? Even after importing it into my component I still get the same error. – imperium2335 May 17 '16 at 13:36
Add `var ReactDOM = require('react-dom');` and use `ReactDOM. renderToString` instead of `React. renderToString`. Or alternatively you can install react verison 0.13.x – Bogdan Savluk May 17 '16 at 13:38
Now I just get ReactDom.renderToString is not a function instead :( – imperium2335 May 17 '16 at 13:40
4

try `var ReactDOMServer = require('react-dom/server');` and `ReactDOMServer.renderToString()` – Damien Leroux May 17 '16 at 13:41
Thanks, that seems to have got it further, but now it's telling me Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. – imperium2335 May 17 '16 at 13:43
it is because exports signature was changed in babel6 to meet es2015 specifications, try replacing `var component = require(view);` with `var component = require(view).default;` – Bogdan Savluk May 17 '16 at 13:46
Thanks, that did it, hello world! – imperium2335 May 17 '16 at 13:47

ReactJS Serverside rendering with Node

2 Answers2