I am using React for my main app that is started after user logs in. Before user logs in I have several pages (log in, sign up, error, reset password) that are outside of the main app. For the main app I set the view engine to be:
app.engine('jsx', require('express-react-views').createEngine());
So, jsx view engine is now set. Right now I want to have several templates for the pages that I have (log in, error, etc.) and I want to inject them with values. I tried using jsx but somehow it is not working, and I do not know why. For instance, here is my error.jsx:
/** @jsx React.DOM */
var React = require('react');
class ErrorPage extends React.Component {
render() {
return (
<html>
<head>
<title>Error</title>
</head>
<div>
{this.props.error_message}
</div>
</html>
);
}
}
module.exports = ErrorPage;
I want to inject it with error_message like this:
app.use(function(err, req, res, next) {
// set locals, only providing error in development
//res.locals.message = err.message;
//res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
var path = __dirname + '/public/error.jsx';
//res.sendFile(path);
res.render(path, {
error_message: err.message
});
});
Right now it is not working giving me
SyntaxError: Unexpected token <
How could I either use jsx for sending separate templates or use another view template side by side? I tried using handlebars, but I am not sure how I can make multiple view engines work at the same time. It would be better though to just accommodate jsx for the purpose. My main React app is working because I attach it to a DOM root element and using webpack configs, but here I can not do this: I want to send a template and just inject a bunch of parameters there.
