diegomura / diegomura/react-pdf
Error "Cannot read properties of undefined (reading 'id')" with Large Text Content in Text Components
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
# Error "Cannot read properties of undefined (reading 'id')" with Large Text Content in Text Components
## Description
When rendering PDF documents containing large paragraphs of text (particularly in RTL direction), the document fails to render and throws an error: `TypeError: Cannot read properties of undefined (reading 'id')`. This occurs in the text layout processing during paragraph reordering.
## Steps to Reproduce
1. Create a Document with multiple Page components
2. Add Text components containing large paragraphs (several hundred words)
3. Include RTL text with Arabic content
4. Attempt to render the document using PDFViewer
5. Observe error in console
## Code Example
```jsx
// Component Implementation
import { Page, Text, Document, PDFViewer } from '@react-pdf/renderer';
const MyDocument = () => (
{largeTextContent.split('\n').map((paragraph, idx) => (
{paragraph}
))}
);
// Error-triggering text processing
{obj?.summary?.split('\n')
.filter(line => line.trim().length > 0)
.map((paragraph, idx) => (
{paragraph}
))}
```
# Error Stack
TypeError: Cannot read properties of undefined (reading 'id')
at reorderLine (react-pdf_renderer.js:82898:33)
at Array.map ()
at reorderParagraph (react-pdf_renderer.js:82917:41)
at layoutText (react-pdf_renderer.js:89025:17)
# Expected Behavior
The PDF should render long text content properly with automatic text wrapping and pagination, without throwing errors.
# Actual Behavior
Document rendering fails with type error during text processing, particularly noticeable with:
- Large text content (>500 words per section)
- RTL text direction
- Multiple consecutive Text components
- Content split using split('\n')
Contributor guide
Assessment
This issue has not been assessed yet.