I'm working with preact for the first time and am trying to render JSX code in express server.
I understand that express doesn't understand JSX syntax and requires babel.
I've installed babel and transform-react-jsx but I still get the undefined error.
Error:
/Users/akarpov/Downloads/test_preact_node/app.js:9
<div class="fox">
^
SyntaxError: Unexpected token <
.babelrc
{
"presets": ["@babel/preset-env"],
"plugins": ["transform-react-jsx"]
}
package.json
{
"name": "test_preact_node",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"@babel/core": "^7.17.10",
"@babel/node": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"body-parser": "^1.20.0",
"cors": "^2.8.5",
"express": "^4.18.1",
"nodemon": "^2.0.16",
"preact": "^10.7.1",
"preact-render-to-string": "^5.2.0"
},
"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel app.js",
"start": "npm run build && nodemon — exec babel-node app.js"
},
"author": "",
"license": "ISC"
}
app.js
const express = require("express");
const { h } = require("preact");
const render = require("preact-render-to-string");
/** @jsx h */
// silly example component:
const Fox = ({ name }) => (
<div class="fox">
<h5>{name}</h5>
<p>This page is all about {name}.</p>
</div>
);
const app = express();
app.listen(3200);
// on each request, render and return a component:
app.get("/:fox", (req, res) => {
let html = render(<Fox name={req.params.fox} />);
// send it back wrapped up as an HTML5 document:
res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});
A couple issues:
--exec, not - exec.'babel-node app.js'-"start": "npm run build && nodemon — exec babel-node app.js"
+"start": "nodemon --exec 'babel-node app.js'"
Not sure why you're running Babel over your project once, and then using babel-node right afterwards. Might've been just something you did while debugging? Either way, not needed.