Conditional Rendering

[jonnny013]

Describe the bug
When re-rendering a changed array, I got an error: @react-pdf_renderer.js?v=a9501a5f:98100 Uncaught TypeError: Cannot read properties of undefined (reading 'return')

To Reproduce
Here is the code that seems to have caused the bug:

        <Text style={styles.diffContainer}>
          {feedback && (
            feedback.map((item, index) => (
              <Text key={index} style={{ ...styles.text, color: item.color }}>
                {item.word === '\n' ? '\n' : item.word + ' '}
              </Text>
            ))
          )}
        </Text>

Expected behavior
It should update without crashing

Desktop (please complete the following information):

• OS: MacOS
• Browser : multiple
• React-pdf version : V4.1.3

[diegomura]

Can you provide what those variables values are? Can't reproduce without that

[jonnny013]

I am trying to debug my code now, this doesn't seem to be the issue after all.

[jonnny013]

I was unable to pinpoint which section of code caused the problem. I rolled back to 4.02, the issue was still there. I rolled back to 4.0.0 and it was solved.

The entire chain of events is a little difficult to explain as my PDF takes in a lot of data. The user can input/delete text, the text gets turned into an array of objects and gets sent to the PDF.
If the text is changed, there will be a re-render of the PDF after 3 seconds.
If I pasted text in, nothing went wrong, but if I deleted from the pasted text it would crash. I haven't changed anything related to my PDF code aside from updates in the last while. I have no idea what other information would help to solve this one.

[diegomura]

Sorry to hear that, but I don't know what to say then :) What version of React are you using?

Cannot read properties of undefined (reading 'return')

Can you inspect your bundle and check what's that thing it's trying to read return from?

[63r6o]

I also had the same issue, also with a quite complex PDF.

I was conditionally rendering parts of a document with data coming from a form.
For some reason, this started to throw an error after version 4.0.0:

// ... other components

{summary && summary.length && (
    <View style={[styles.section, styles.flatSection]}>
      <Text style={styles.flatSectionTitle}>Summary</Text>
      <Text style={styles.flatSectionView}>{summary}</Text>
    </View>
)}

Using the render prop solved the issue for me:

// ... other components

    <View
      wrap={false}
      render={() => {
        if (summary && summary.length) {
          return (
            <View style={[styles.section, styles.flatSection]}>
              <Text style={styles.flatSectionTitle}>Summary</Text>
              <Text style={styles.flatSectionView}>{summary}</Text>
            </View>
          );
        }
      }}
    />

but it's causing another problem: #2476

I'm using Next.js 14, should I try to create a minimal reproducible example?

[Kiborgik]

had almost the same error message

react-dom.development.js:20769 Uncaught TypeError: Cannot read properties of undefined (reading 'return')
    at R (reconciler-26.js:9:2906)
    at Kl (reconciler-26.js:9:58343)
    at Jl (reconciler-26.js:9:56913)
    at unstable_runWithPriority (scheduler.development.js:317:12)
    at fn (reconciler-26.js:9:7986)
    at Gl (reconciler-26.js:9:56139)
    at jl (reconciler-26.js:9:52422)
    at eval (reconciler-26.js:9:8209)
    at unstable_runWithPriority (scheduler.development.js:317:12)
    at fn (reconciler-26.js:9:7986)
    at mn (reconciler-26.js:9:8154)
    at pn (reconciler-26.js:9:8089)
    at Ul (reconciler-26.js:9:49584)
    at r.updateContainer (reconciler-26.js:9:67882)
    at Object.updateContainer (react-pdf.browser.js:267:14)
    at eval (react-pdf.browser.js:487:25)
    at eval (react-pdf.browser.js:546:58)
    at commitHookEffectListMount (react-dom.development.js:21102:23)
    at commitHookPassiveMountEffects (react-dom.development.js:23154:7)

the problem in this function:

function R(e, n) {
        for (var t = e.alternate; null !== n; ) {
            if (n === e || n === t)
                return !0;
            n = n.return
                 ^ Error
        }
        return !1
}

in my case this error was when I tried put undefined/broken View data in PDFDownloadLink or PDFPreview

[Jussinevavuori]

I also had the same issue, also with a quite complex PDF.

I was conditionally rendering parts of a document with data coming from a form. For some reason, this started to throw an error after version 4.0.0:

// ... other components

{summary && summary.length && (
    <View style={[styles.section, styles.flatSection]}>
      <Text style={styles.flatSectionTitle}>Summary</Text>
      <Text style={styles.flatSectionView}>{summary}</Text>
    </View>
)}

Using the render prop solved the issue for me:

// ... other components

    <View
      wrap={false}
      render={() => {
        if (summary && summary.length) {
          return (
            <View style={[styles.section, styles.flatSection]}>
              <Text style={styles.flatSectionTitle}>Summary</Text>
              <Text style={styles.flatSectionView}>{summary}</Text>
            </View>
          );
        }
      }}
    />

but it's causing another problem: #2476

I'm using Next.js 14, should I try to create a minimal reproducible example?

Could this be caused by the fact that when summary.length is 0, the expression summary.length short-circuits and the entire expression evaluates to 0? In React, you do conditional rendering with:

// Renders nothing if myNumber === 0
{ myNumber > 0 && <MyComponent /> }

instead of

// Renders 0 if myNumber === 0
{ myNumber && <MyComponent /> }

[63r6o]

yep @Jussinevavuori , my bad. But the issue still stands, even when I use proper conditionals.
here is a minimal reproducible example: https://github.com/63r6o/react-pdf-conditional-error
The error happens when I try to re-render the document without a previously present component.

It might be an issue on my part, but it used to work in version 3.4.4. For now, doing the conditional check in the render prop works, but it opens up another can of worms with #2476

[cutefatboy]

Hey guys, newbie developer here.

Same issue is happening with me.

Let's say I have a document from a database that is split into chunks like

[Paragraph: string]
[List: array]

If the string or array is one of the following:
"empty || length === 0 || undefined || null" in the database you will get "TypeError: Cannot read properties of undefined (reading 'return')"

Here is an example that will work if you DO have text but not if you DO NOT have text. I tried to display an empty string or array and it still throws the error.

 {summary.length > 0 && (
                    <View style={styles.summary}>
                        <Text style={styles.sectionTitle}>Summary</Text>
                        <Text style={{ marginTop: 4 }}>{formatBulletList(summary || '')}</Text>
                    </View>
                )}

Tried reverting from 4.0.2 to 4.0.0 and error still persists

Soft fix is to have absolutely filled out or have my database have default values with truthy stuff in it.

Edit: Reverted to 3.4.5 and it works now yay

[spiderneo]

Hi,

My case is not so complex, but I encounter an error with versions above 4.0.0.
As soon as showSignature changes (it's updated each time), the error occurs.
There's no issue with version 3.4.5.

TypeError: n is undefined
    R reconciler-26.js:1
    Kl reconciler-26.js:1
    Jl reconciler-26.js:1
    unstable_runWithPriority scheduler.development.js:317
    fn reconciler-26.js:1
    Gl reconciler-26.js:1
    jl reconciler-26.js:1
    node_modules index.js:169760
    unstable_runWithPriority scheduler.development.js:317
    fn reconciler-26.js:1
    mn reconciler-26.js:1
    pn reconciler-26.js:1
    Ul reconciler-26.js:1
    node_modules index.js:169760
    updateContainer react-pdf.browser.js:216
    node_modules index.js:172275
    node_modules index.js:172334
    React 15
    handleClick PdfCard.js:20
    React 23
    <anonymous> index.js:9
    EventListener.handleEvent* index.js:5
    <anonymous> index.js:201112
    <anonymous> index.js:201114

    <Document
        onLoadError={console.error}
        >
            <Page size="A4" style={styles.page}>

              {InvoiceTitle()}
              {AddressCarmin()}
              {UserAddress()}
              {TableHead()}
              {TableBody()}
              {TableTotal()}
              {Footer()} 
            </Page>
            {showSignature!= undefined && showSignature === true && (
              <Page size="A4" style={styles.page}>
                  {Signature()}
                  {Footer()}
              </Page>
            )}
            
        </Document>

[kwarr128]

i'm getting the same error as others, but it is happening when calling the updateInstance function from the usePDF hook.

i've further narrowed it down to specifically version 4.0.2 that breaks it? for my case anyway, 4.0.1 works fine