Estoy trabajando con preact por primera vez y estoy tratando de representar el código JSX en el servidor express.
Entiendo que express no entiende la sintaxis JSX y requiere babel.
Instalé babel y transform-react-jsx pero sigo recibiendo el error indefinido.
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"] }paquete.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" }aplicación.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>`); });Un par de problemas:
--exec , no - exec .'babel-node app.js' -"start": "npm run build && nodemon — exec babel-node app.js" +"start": "nodemon --exec 'babel-node app.js'"No estoy seguro de por qué ejecuta Babel sobre su proyecto una vez y luego usa babel-node inmediatamente después. ¿Podría haber sido solo algo que hiciste durante la depuración? De cualquier manera, no es necesario.