I've been attempting to learn how to use express-react-views, and for some reason, my JSX is returning an error. According to github, the JSX should automatically get transformed by babel when using express-react-views, so I'm not sure why I'm getting this error.

/home/runner/Vouse/views/Home.jsx:6    
    <Header />    
    ^

SyntaxError: Unexpected token '<'

Here's some of my code:

index.js

// dependencies
const express = require("express");
const path = require("path");
const reactViews = require("express-react-views");

// create app
const app = express();

// app setup
app.set("view engine", "jsx");
app.set("views", path.join(__dirname, "views"));
app.engine("jsx", reactViews.createEngine());

app.use("/public", express.static(path.join(__dirname, "public")));
app.use(express.json());

// routes
const mainRouter = require("./routes/main");
const apiRouter = require("./routes/api");

app.use("/", mainRouter);
app.use("/api", apiRouter);

// initialize app
const port = process.env.PORT;
app.listen(port, () => console.log(`Server listening on port ${port}.`));

main.js

const router = require("express").Router();

console.log(require("../views/Home.jsx"));

router.get("/", (req, res) => {
  res.render("Home");
});

module.exports = router;

Home.jsx

const React = require("react");
const Header = require("./components/Header.jsx");

function Home() {
  return (
    <Header />
  );
}

module.exports = Home;

If you would like to see any more code, please let me know. Also, I don't know if this has any effect, but I'm running this project on replit.