I am attempting to import a jsx component into Express.

I am attempting to integrate this component with a library that insists on the use of “import” statements and not the old “require”.

When I attempt to import the component I get the error “ERR_UNKNOWN_FILE_EXTENSION(ext, filepath)”.

Here are a few of the things I’ve tried:

Based on the advice from this SO post I added:

require("@babel/register")({
  presets: ["preset-react", "preset-env"],
  extensions: [".ts,.tsx,.js,.jsx"],
});

But because I need to use “import” the server crashes. So based on this SO post I added:

import { createRequire } from "module";
const require = createRequire(import.meta.url);

so that I can use the require hook that Babel provides. I still receive the ‘ERR_UNKNOWN_FILE_EXTENSION’ error.

Lastly I made a config.js that sat one layer higher than my server.js based on another SO post.

config.js:

require('@babel/register')({
    presets: ["preset-react", "preset-env"],
    extensions: [".ts,.tsx,.js,.jsx"],
})
// Import the rest of our application.
module.exports = require('./server.js')

I still receive the same ‘ERR_UNKNOWN_FILE_EXTENSION’.

I am unsure of how to proceed, it seems as though others have been able to find a work-around but none of their solutions are working in my case. Any thoughts or tips are greatly appreciated.

For Reference:

server.js

import { createRequire } from "module";
const require = createRequire(import.meta.url);

require("@babel/register")({
  presets: ["preset-react", "preset-env"],
  extensions: [".ts,.tsx,.js,.jsx"],
});
import { register } from "./babelRegister.js";

import express from "express";
import * as React from "react";
import { renderAsync } from "@react-email/render";
import { Resend } from "resend";
import dotenv from "dotenv";
import cors from "cors";

import { JobMarkedComplete } from "./emails/Needer/JobMarkedComplete.jsx";

const app = express();



dotenv.config();

app.use(
  cors({
    origin: "http://localhost:3000",
    optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
  })
);


app.listen(8000);

console.log("here i am");

const resend = new Resend(process.env.RESEND_API_KEY);

app.post("/sendNeederWelcomeEmail", async (req, res) => {
  console.log("nice");
  const { data, error } = await resend.emails.send({
    from: "Acme <[email protected]>",
    to: ["[email protected]"],
    subject: "hello world",
    html: "<p>changed where new resend is instantiated</p>",
  });

  if (error) {
    return res.status(400).json({ error });
  }

  res.status(200).json({ data });
});

package.json:

{
  "name": "fulfilemailapi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "nodemon server.js",
    "newStart": "babel-node --presets preset-react server.js",
    "dev": "email dev",
    "build": "node --experimental-loader @node-loader/babel ./lib/build.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@babel/cli": "^7.24.6",
    "@babel/core": "^7.24.6",
    "@babel/plugin-transform-modules-commonjs": "^7.24.6",
    "@babel/preset-react": "^7.24.6",
    "@babel/register": "^7.24.6",
    "@node-loader/babel": "^2.1.0",
    "@react-email/components": "0.0.19",
    "@react-email/render": "0.0.15",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "esm": "^3.2.25",
    "express": "^4.19.2",
    "react": "^18.3.1",
    "react-email": "2.1.4",
    "resend": "^3.2.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.24.6",
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "nodemon": "^3.1.1"
  }
}

babel.config.js

export default {
    sourceType: "module",
    presets: [
        ["env"],
      [
        "@babel/preset-react",
        {
          runtime: "automatic",
        },
      ],
    ],
  };