preact-render-to-string for express returning Unexpected token <-CodePudding

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 >
  ^

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 >
    <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>`);
});

CodePudding user response：

A couple issues:

The flag is --exec, not - exec.
You need quotes around your command, i.e, '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.