diegomura / diegomura/react-pdf

Compatibility with React 19 - TypeError: Cannot read properties of null (reading 'props') and Reconciler Incompatibility

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

Description

### Description

After upgrading to React v19.2.0, `react-pdf` outputs a TypeError to the console, stating that props on this line is null:
```JS
. . .
const render = async function (compress) {
if (compress === void 0) {
compress = true;
}
const props = container.document.props || {}; <--- **ERROR**
const {
pdfVersion,
language,
pageLayout,
pageMode,
title,
author,
subject,
keyboards,
creator = 'react-pdf',
producer = 'react-pdf',
creationDate = new Date(),
modificationDate
} = props;
const ctx = new PDFDocument({
. . .
```

Additionally, a reconciler error occurs seemingly at random. I'm assuming it is happening at unload (see below).

### Steps to reproduce

Set up a React 19 project.
Set up a PDFViewer rendering a document. See error in console.

```TSX

{template}

```

### Expected behavior

Document rendered without errors.

### Actual behavior

Document rendered in window properly, but `TypeError: Cannot read properties of null (reading 'props')` error printed to console.

### Additional information

Image

```
TypeError: Cannot read properties of null (reading 'props')
at a (react-pdf.browser.js:140:38)
at Object.toBlob (react-pdf.browser.js:198:15)
at react-pdf.browser.js:314:109
at Het.r.start (index.js:145:17)
at r. [as splice] (index.js:59:12)
at Array.l (react-pdf.browser.js:314:19)
at t (react-pdf.browser.js:122:62)
at reconciler-31.js:10:74372
at Wn (reconciler-31.js:10:74737)
at hu (reconciler-31.js:10:68185)
at cs (reconciler-31.js:10:67882)
at ee (reconciler-31.js:10:8613)
at U (reconciler-31.js:10:7438)
at wu.flushSyncWork (reconciler-31.js:10:89114)
at Object.updateContainer (reconciler-31.js:19:1899)
at Object.i [as updateContainer] (react-pdf.browser.js:133:14)
at react-pdf.browser.js:354:25
at react-pdf.browser.js:370:19
at Pi (react-dom-client.production.js:8583:24)
at eh (react-dom-client.production.js:10126:23)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
overrideMethod @ hook.js:608
(anonymous) @ console.js:36
c @ react-pdf.browser.js:317
Qet.a.emit @ events.js:153
y @ index.js:108
(anonymous) @ index.js:150
Promise.catch
Het.r.start @ index.js:149
r. @ index.js:59
l @ react-pdf.browser.js:314
t @ react-pdf.browser.js:122
(anonymous) @ reconciler-31.js:10
Wn @ reconciler-31.js:10
hu @ reconciler-31.js:10
cs @ reconciler-31.js:10
ee @ reconciler-31.js:10
U @ reconciler-31.js:10
wu.flushSyncWork @ reconciler-31.js:10
updateContainer @ reconciler-31.js:19
i @ react-pdf.browser.js:133
(anonymous) @ react-pdf.browser.js:354
(anonymous) @ react-pdf.browser.js:370
Pi @ react-dom-client.production.js:8583
eh @ react-dom-client.production.js:10126
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10120
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10241
m0 @ react-dom-client.production.js:10101
eh @ react-dom-client.production.js:10137
as @ react-dom-client.production.js:11763
Ho @ react-dom-client.production.js:11739
V0 @ react-dom-client.production.js:12085
Eu @ react-dom-client.production.js:11956
Zi @ react-dom-client.production.js:11726
Si @ react-dom-client.production.js:11521
dy @ react-dom-client.production.js:10920
wp @ react-dom-client.production.js:10826
od @ react-dom-client.production.js:12078
I @ scheduler.production.js:151
hook.js:608 TypeError: Cannot read properties of null (reading 'props')
at a (react-pdf.browser.js:140:38)
at Object.toBlob (react-pdf.browser.js:198:15)
at react-pdf.browser.js:314:109
at Het.r.start (index.js:145:17)
at y (index.js:120:16)
at index.js:150:14
```

Reconciler error which results in a broken render of a blank white page:
```
reconciler-31.js:10 Uncaught TypeError: Fu is not a function
at Wf (reconciler-31.js:10:56373)
at Wf (reconciler-31.js:10:56286)
at Wf (reconciler-31.js:10:56286)
at zo (reconciler-31.js:10:65698)
at Ka (reconciler-31.js:10:64663)
at _i (reconciler-31.js:10:64861)
at Ka (reconciler-31.js:10:64725)
at _i (reconciler-31.js:10:64861)
at Ka (reconciler-31.js:10:64725)
at _i (reconciler-31.js:10:64795)
at Ka (reconciler-31.js:10:64725)
at _i (reconciler-31.js:10:64795)
at Ka (reconciler-31.js:10:64725)
at _i (reconciler-31.js:10:64861)
at Ma (reconciler-31.js:10:75095)
at reconciler-31.js:10:74656
at Wn (reconciler-31.js:10:74737)
at hu (reconciler-31.js:10:68185)
at cs (reconciler-31.js:10:67882)
at ee (reconciler-31.js:10:8613)
at U (reconciler-31.js:10:7438)
at wu.flushSyncWork (reconciler-31.js:10:89114)
at Object.updateContainer (reconciler-31.js:19:1899)
at Object.i [as updateContainer] (react-pdf.browser.js:133:14)
at react-pdf.browser.js:354:25
at react-pdf.browser.js:370:19
at Pi (react-dom-client.production.js:8583:24)
at eh (react-dom-client.production.js:10126:23)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10241:7)
at m0 (react-dom-client.production.js:10101:7)
at eh (react-dom-client.production.js:10120:7)
```

### Environment

- **Browser (if applicable)**: Brave 1.83.109 (Chromium 141.0.7390.55)
- **React-PDF version**: 4.3.1
- **React version**: 19.2.0
- **Bundler name and version (if applicable)**: Vite 7.1.9
- **Operating System**: Windows

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.