Deploy Express server to Vercel with ESM dependancy?

Help
1

I have an Express server which uses a ESM dependancy react-pdf. I also need the file to be .tsx as I’m using TypeScript JSX for rendering.

I have this working locally but I run into issues when trying to deploy to Vercel:

import React from "react";
import express, { Request, Response } from "express";
import ReactPDF, {
  Document,
  Page,
  Text,
  View,
  StyleSheet,
} from "@react-pdf/renderer";

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

app.get("/pdf", async (req: Request, res: Response) => {
  const pdfStream = await ReactPDF.renderToStream(<MyDocument />);
  res.setHeader("Content-Type", "application/pdf");
  pdfStream.pipe(res);
});

/var/task/api/pdf.js:1
(function (exports, require, module, __filename, __dirname) { import React from "react";
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (node:vm:117:7)
    at Object.precompile (/opt/rust/bytecode.js:2:426)
    at Module.<anonymous> (/opt/rust/bytecode.js:2:1392)
    at A.l._compile (/opt/rust/bytecode.js:2:3145)
    at Object..js (node:internal/modules/cjs/loader:1895:10)
    at Module.load (node:internal/modules/cjs/loader:1465:32)
    at Function.<anonymous> (node:internal/modules/cjs/loader:1282:12)
    at /opt/rust/nodejs.js:2:12456
    at Function.Rr (/opt/rust/nodejs.js:2:12834)
    at Ae.e.<computed>.Me._load (/opt/rust/nodejs.js:2:12426)
Node.js process exited with exit status: 1. The logs above can help with debugging the issue.

I think the error is due to react-pdf using ESM modules, but from googleling it seems Vercel does somewhat support these so Im not sure what the solution is.

My repo with the issue: GitHub - maybebansky/pdf-api-demo

2

If you’re having trouble deploying an Express app, this guide can help.

You can also ask v0 for suggestions tailored to your own project setup.