React/Express - 'Unexpected token <' in call to renderToString()

Viewed 10217

I'm working on setting up server-side rendering for my React/Express app, but I'm encountering a syntax error relating to the call to the react-dom/server renderToString() method. I'm loosely following this tutorial - http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/

index.js (Express app root):

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

const express = require('express')
const path = require('path')
const app = express()
const React = require('react')
const reactDomServer = require('react-dom/server')
const routes = require('./src/routes.jsx')
const reactRouter = require('react-router')
let { match, RouterContext } = reactRouter

app.get('*', (req, res) => {
    match({ routes: routes, location: req.url }, (err, redirect, props) => {
        const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>)
        res.send(renderPage(appHtml))
    })
})

However, this causes the error:

const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>)
                                              ^
SyntaxError: Unexpected token <

All of the similar examples that I've seen have a straight JSX component dropped in... what am I missing?

2 Answers
Related