PDFDocument_default.registerFontkit is not a function

[tayek333]

I’m encountering the following error when trying to register fontkit with pdf-lib in my Remix project deployed on Cloudflare Pages/Workers:

PDFDocument_default.registerFontkit is not a function

Despite several adjustments to the import statements and Vite configuration, the error persists. I suspect this issue is related to ESM module resolution in the Cloudflare Workers environment.

Environment Details:
• Project Framework: Remix deployed on Cloudflare Pages/Workers
• pdf-lib: ^1.17.1
• @pdf-lib/fontkit: ^1.1.1
• Cloudflare Workers Runtime: v3.12+

vite.config.ts

import { defineConfig } from “vite”;
import tsconfigPaths from “vite-tsconfig-paths”;
import { remixCloudflareDevProxyVitePlugin as remixCloudflareDevProxy, vitePlugin as remix } from “@remix-run/dev”;
export default defineConfig({
plugins: [
remixCloudflareDevProxy(),
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
v3_singleFetch: true,
v3_lazyRouteDiscovery: true,
},
}),
tsconfigPaths(),
],
ssr: {
noExternal: [
‘lucide-react’,
‘react-dropzone’,
‘@pdf-lib/fontkit’
]
},
build: {
rollupOptions: {
external: [
‘node:buffer’,
‘node:stream’
]
}
}
});

index.tsx

import { PDFDocument, rgb } from 'pdf-lib';
import * as fontkit from '@pdf-lib/fontkit';

// Directly register fontkit with PDFDocument
PDFDocument.registerFontkit(fontkit);

async function createPdf(): Promise<string> {
  // Create a new PDF document
  const pdfDoc = await PDFDocument.create();

  // Embed a font from a URL
  const fontUrl = "https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNr4jBS1A.ttf";
  const fontBytes = await fetch(fontUrl).then(res => res.arrayBuffer());
  const embeddedFont = await pdfDoc.embedFont(fontBytes, { fontkit });

  // Add a page and draw some text using the embedded font
  const page = pdfDoc.addPage([612, 792]);
  const { width, height } = page.getSize();
  page.drawText("Hello, PDF World!", {
    x: 50,
    y: height - 100,
    size: 24,
    font: embeddedFont,
    color: rgb(0, 0, 0),
  });

  // Save the PDF and return it as a base64 string
  const pdfBytes = await pdfDoc.save();
  return Buffer.from(pdfBytes).toString("base64");
}

async function main() {
  try {
    const pdfBase64 = await createPdf();
    console.log("Generated PDF (base64):", pdfBase64);
  } catch (error) {
    console.error("Error generating PDF:", error);
  }
}

main();

Steps to Reproduce:
1. Setup Environment:
• Deploy a Remix project to Cloudflare Pages/Workers.
• Install dependencies:
npm install pdf-lib @pdf-lib/fontkit
• Configure Vite as shown above.
2. Import and Register Fontkit:
• Use the namespace import (import * as fontkit from ‘@pdf-lib/fontkit’;).
• Call PDFDocument.registerFontkit(fontkit) before embedding fonts.
3. Deploy and Run:
• Generate a PDF (e.g., embedding a TTF font from a CDN) and observe the error:
PDFDocument_default.registerFontkit is not a function

Workarounds Attempted:
1. Import Variations:
• Tried both namespace (import * as fontkit from ‘@pdf-lib/fontkit’;) and default imports (import fontkit from ‘@pdf-lib/fontkit’;). Neither resolved the error.
2. Dynamic CDN Import:
• Attempted dynamic import from a CDN:
const fontkit = await import(‘https://cdn.jsdelivr.net/npm/@pdf-lib/[email protected]/+esm’);
PDFDocument.registerFontkit(fontkit.default);
3. Vite Configuration Adjustments:
• Experimented with moving @pdf-lib/fontkit between ssr.noExternal and rollupOptions.external settings. The issue remained unresolved.

Expected Behavior:
After successfully registering fontkit with PDFDocument.registerFontkit, Create PDF should work as expected with embedded fonts (supporting full Unicode, including Chinese and Greek characters).

[penalosa]

Thanks for reporting this! Would you be able to provide a cloneable reproduction repo that demonstrates the issue?

[tayek333]

Thanks for reporting this! Would you be able to provide a cloneable reproduction repo that demonstrates the issue?

Yes, however there is a a workaround solution. It is to render a webpage in puppeteer and then save it as a PDF. Instead of generating a PDF directly. Not sure if this issue is worth solving. But I will provide a clone able repo soon for further investigation.