diegomura / diegomura/react-pdf
Compatibility with React 19 - TypeError: Cannot read properties of null (reading 'props') and Reconciler Incompatibility
- 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
```
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
Assessment
This issue has not been assessed yet.