[SyntaxError] "Unexpected token <" [render(<App/>)]

I’ve got this error when I launch my node server :

    content: render(<App/>)
                    ^
SyntaxError: Unexpected token <
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:425:7)
    at startup (bootstrap_node.js:146:9)

Here’s a sample of my server.js file (didn’t show all the requires for instance).
I don’t know what’s wrong. You can see I use preact-render-to-string and pass this rendering to my handlebar template.

The same technique is used there : https://github.com/jakearchibald/big-web-quiz/blob/master/server/views.js

const handlebars = require('handlebars');
const render = require('preact-render-to-string');
const index = require('../front/index');
/** @jsx h */

app.get('/', (req, res) => {
  res.send(index({
    css: ['/static/style.css'],
    lazyCss: ['/static/style.css'],
    scripts: ['/static/build.js'],
    content: render(<App/>)
  }));
});

[developit]

Hi there - you need to transpile this with Babel, since you’re using the JSX Syntax. If you already have Babel set up, it’s likely you’re just missing the babel-plugin-transform-react-jsx plugin. In your .babelrc:

{
  "plugins": [
    ["transform-react-jsx", { "pragma": "h" }]
  ]
}

In the repo you linked, you can see where they run Babel with that plugin here: https://github.com/jakearchibald/big-web-quiz/blob/master/gulpfile.js#L108-L118

[developit]

There is: you can use the hyperscript function (h()) directly instead of JSX, or something like HyperX or t7, which use template strings instead of JSX. If this is the only file you’re not transpiling though, it’s super easy to change <App /> out for h(App):

const handlebars = require('handlebars');
const render = require('preact-render-to-string');
const index = require('../front/index');

app.get('/', (req, res) => {
  res.send(index({
    css: ['/static/style.css'],
    lazyCss: ['/static/style.css'],
    scripts: ['/static/build.js'],
    content: render( h(App) )   // h() usage
  }));
});