(edited)
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: https://github.com/maybebansky/pdf-api-demo
