Error "Cannot read properties of undefined (reading 'id')" with Large Text Content in Text Components

[Hanna-Hinn]

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

// Component Implementation
import { Page, Text, Document, PDFViewer } from '@react-pdf/renderer';

const MyDocument = () => (
  <Document>
    <Page>
      {largeTextContent.split('\n').map((paragraph, idx) => (
        <Text 
          key={idx} 
          style={{ 
            direction: 'rtl',
            textAlign: 'right',
            fontFamily: 'Cairo',
            fontSize: 12
          }}
        >
          {paragraph}
        </Text>
      ))}
    </Page>
  </Document>
);

// Error-triggering text processing
{obj?.summary?.split('\n')
  .filter(line => line.trim().length > 0)
  .map((paragraph, idx) => (
    <Text key={`summary-${idx}`} style={styles.text}>
      {paragraph}
    </Text>
  ))}

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')