CODEWITHSUNDEEP
reactjsreact-dom-server
trogne
trogne

Reputation: 3562

jsx passed to react-dom/server renderToString

I'm trying to understand react-dom/server.

I have a react application, using express as the server.

I have an express route like so : 

var server = app.listen(3000);
app.get('/test', (req, res) => {                       
  const context = {}
  const html = ReactDOMServer.renderToString(
      <h1>foo</h1>
  )  
  if (context.url) {
    res.writeHead(302, {
      Location: context.url
    })
    res.end()
  } else {
    res.write(html)
    res.end()
  }
});

If I run the server file with node app-server, I get this error :

      <h1>adasd</h1>
      ^
SyntaxError: Unexpected token <

I passed JSX to renderToString based on the example there : https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/StaticRouter.md

How can I make the express server file processed this JSX code ?

For the client side, I use webpack with the babel loader, and it works fine.

Upvotes: 0

Views: 1086

Answers (1)

trogne
trogne

Reputation: 3562

Thanks to @azium.

Solution was to first convert the ES6/JSX file with babel-cli .

I used this babel-cli command : 

npx babel --no-babelrc script.js --out-file script-compiled.js --presets=es2015,react

npx is used to "execute npm package binaries"

Upvotes: 0

Related Questions