@react-pdf/renderer crashes when used via external package in Next.js App Router (monorepo)

Open
  • Is something wrong?
#3,285 2 comments 1 reaction 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
next.js, react, typescript
Domain
api, backend

Research direction

Reproduce the failure using the monorepo structure in packages/pdf/components.ts and apps/web/app/api/pdf/route.tsx, then compare dependency resolution with the working direct import. Start at renderToStream and inspect how the external package path differs; done means PDF generation succeeds through @repo/pdf without the runtime error.

Written by the indexing model from the issue text.

Description

When using @react-pdf/renderer in a Next.js App Router project via an external package (e.g. from a monorepo), PDF generation fails at runtime.

However, the same code works correctly if @react-pdf/renderer is installed directly in the Next.js application.

TypeError: Cannot read properties of undefined (reading 'S')

Thrown during renderToStream.

Environment
• Next.js: 15 (App Router)
• React: 19
• Node.js: 22
• Monorepo: Turborepo
• Package manager: pnpm
• @react-pdf/renderer: 4.3.2

Project structure

apps/
  web/               ← Next.js App Router app
packages/
  pdf/               ← custom package wrapping @react-pdf/renderer

packages/pdf exports React components based on @react-pdf/renderer:

// packages/pdf/components.ts
export { Document, Page, Text } from "@react-pdf/renderer";

❌ Failing case (renderer used via external package)

// apps/web/app/api/pdf/route.tsx
import { Document, Page, Text } from "@repo/pdf/components";
import { renderToStream } from "@repo/pdf/server";

export async function GET() {
  const stream = await renderToStream(
    <Document>
      <Page>
        <Text>Hello</Text>
      </Page>
    </Document>
  );

  return new Response(stream);
}

Result:

TypeError: Cannot read properties of undefined (reading 'S')

✅ Working case (renderer installed in app)

// apps/web/app/api/pdf/route.tsx
import { Document, Page, Text, renderToStream } from "@react-pdf/renderer";

export async function GET() {
  const stream = await renderToStream(
    <Document>
      <Page>
        <Text>Hello</Text>
      </Page>
    </Document>
  );

  return new Response(stream);
}

✅ Works without errors.

Key observation
• JSX, runtime, and code are identical
• Only difference:
• ❌ @react-pdf/renderer resolved from external package
• ✅ @react-pdf/renderer resolved from Next.js app itself

This indicates a possible issue with:
• multiple React renderers / reconciler instances
• module resolution in monorepos
• assumptions inside @react-pdf/renderer about React element identity
• interaction with Next.js App Router (RSC)

Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
11m
Merged PRs (30d)
2

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from diegomura/react-pdf

All issues in diegomura/react-pdf

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.