diegomura / diegomura/react-pdf

Nextjs 14 - Package @react-pdf/renderer (serverComponentsExtenalPackages or default list) can't be external

Open
#3,126 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**
React-PDF is not working with Nextjs 14 and React 18

**To Reproduce**
Steps to reproduce the behavior including code snippet (if applies):

1. Follow the quick start guide.
2. Gets error: TypeError: a.Component is not a constructor
3. Add serverComponentsExternalPackages from Compatibility with Next.js section.
4. Gets error: Package @react-pdf/renderer (serverComponentsExtenalPackages or default list) can't be external

> ⨯ ModuleBuildError: ./node_modules/.pnpm/@react-pdf+renderer@4.3.0_react@18.3.1/node_modules/@react-pdf/renderer/lib/react-pdf.js
> Package @react-pdf/renderer (serverComponentsExtenalPackages or default list) can't be external
> The request @react-pdf/renderer matches serverComponentsExtenalPackages (or the default list), but it can't be external:
> The package seems invalid. require() resolves to a EcmaScript module, which would result in an error in Node.js.
>
>
> at processIssues (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/turbopack-utils.js:229:15)
> at handleRouteType (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/turbopack-utils.js:405:17)
> at async Object.ensurePage (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/hot-reloader-turbopack.js:644:17)
> at async DevBundlerService.ensurePage (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/dev-bundler-service.js:18:20)
> at async DevServer.ensurePage (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/next-dev-server.js:551:9)
> at async Object.ensure (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/next-dev-server.js:169:17)
> at async DevRouteMatcherManager.matchAll (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-matcher-managers/dev-route-matcher-manager.js:96:13)
> at async DevRouteMatcherManager.match (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/future/route-matcher-managers/default-route-matcher-manager.js:155:26)
> at async NextNodeServer.handleCatchallRenderRequest (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/next-server.js:228:31)
> at async DevServer.handleRequestImpl (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-server.js:811:17)
> at async /Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/next-dev-server.js:339:20
> at async Span.traceAsyncFn (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/trace/trace.js:154:20)
> at async DevServer.handleRequest (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
> at async invokeRender (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/router-server.js:174:21)
> at async handleRequest (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/router-server.js:353:24)
> at async requestHandlerImpl (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/router-server.js:377:13)
> at async Server.requestListener (/Users/escobar5/Projects/enviaseo/urbanismo/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/lib/start-server.js:141:13)

**Expected behavior**
Should render the PDF

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**

- OS: MacOS
- Browser Chromium, Safari, Arc
- React-pdf version 4.3.0

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.