TypeError: Cannot read properties of undefined (reading 'hasOwnProperty') in Next js 15 and React 19

[Rohit-Ahirwal]

Hi
I am using the react-pdf with my nextjs e-commerce web to generate invoice pdf but it is working until I haven't upgrade to react 19 and Next js 15 after upgrading it giving me the following error

TypeError: Cannot read properties of undefined (reading 'hasOwnProperty') at $$$reconciler (file:///C:/Users/User/Desktop/3DMatrix/frontend/node_modules/@react-pdf/renderer/lib/react-pdf.js:66:6) at createRenderer (file:///C:/Users/User/Desktop/3DMatrix/frontend/node_modules/@react-pdf/renderer/lib/react-pdf.js:3965:10) at pdf (file:///C:/Users/User/Desktop/3DMatrix/frontend/node_modules/@react-pdf/renderer/lib/react-pdf.js:4167:26) at renderToStream (file:///C:/Users/User/Desktop/3DMatrix/frontend/node_modules/@react-pdf/renderer/lib/react-pdf.js:4307:20) at renderToFile (file:///C:/Users/User/Desktop/3DMatrix/frontend/node_modules/@react-pdf/renderer/lib/react-pdf.js:4318:24) at GET (webpack-internal:///(rsc)/./app/api/invoice/generateInvoice/[orderid]/route.js:1203:80) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async AppRouteRouteModule.do (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:10:32801) at async AppRouteRouteModule.handle (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:10:38302) at async doRender (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\base-server.js:1493:42) at async responseGenerator (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\base-server.js:1834:28) at async DevServer.renderToResponseWithComponentsImpl (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\base-server.js:1878:28) at async DevServer.renderPageComponent (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\base-server.js:2292:24) at async DevServer.renderToResponseImpl (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\base-server.js:2330:32) at async DevServer.pipeImpl (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\base-server.js:984:25) at async NextNodeServer.handleCatchallRenderRequest (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\next-server.js:281:17) at async DevServer.handleRequestImpl (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\base-server.js:877:17) at async C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\dev\next-dev-server.js:373:20 at async Span.traceAsyncFn (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\trace\trace.js:157:20) at async DevServer.handleRequest (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\dev\next-dev-server.js:370:24) at async invokeRender (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\lib\router-server.js:183:21) at async handleRequest (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\lib\router-server.js:360:24) at async requestHandlerImpl (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\lib\router-server.js:384:13) at async Server.requestListener (C:\Users\User\Desktop\3DMatrix\frontend\node_modules\next\dist\server\lib\start-server.js:142:13)
this is my API code

`
import { NextResponse } from 'next/server';
import { Document, Font, Image, Page, renderToFile, StyleSheet, Text, View, Link } from '@alexandernanberg/react-pdf-renderer';
import axios from 'axios';
import path from 'path'
import fs from 'fs'
import { getAuthToken } from '@/data/actions/GetAuthToken';

Font.register({
family: 'RobotoMono',
src: 'C:/Users/User/Desktop/3DMatrix/frontend/public/fonts/Roboto_Mono/RobotoMono-Regular.ttf'
})

Font.register({
family: 'Roboto',
src: 'C:/Users/User/Desktop/3DMatrix/frontend/public/fonts/Roboto/Roboto-Regular.ttf'
})

Font.register({
family: 'RobotoBold',
src: 'C:/Users/User/Desktop/3DMatrix/frontend/public/fonts/Roboto/Roboto-Bold.ttf'
})

const styles = StyleSheet.create({
// my styles
})

export async function GET(request, ctx) {

const { orderid } = await ctx.params;
const authToken = await getAuthToken()
const invoiceData = await axios.get(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/orders/${orderid}`, {
    headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${authToken}`
    }
})
try {
    // Render the invoice to a PDF stream
    const tempFilePath = path.join('public/temp_invoices', `${orderid}.pdf`);

    // Render the PDF and save it to a temporary file
    await renderToFile(<FormatedInvoice invoice={invoiceData.data} />, tempFilePath);

    // Serve the PDF file to the user
    const pdfFile = fs.readFileSync(tempFilePath);
    const response = new NextResponse(pdfFile, {
        headers: {
            'Content-Type': 'application/pdf',
            'Content-Disposition': `attachment; filename="${orderid}.pdf"`, // Force download
        },
    });

    setTimeout(() => {
        fs.unlink(tempFilePath, (err) => {
            if (err) {
                console.error('Error deleting temp file:', err);
            } else {
                console.log('Temp file deleted successfully:', tempFilePath);
            }
        });
    }, 10000);

    return response;
} catch (error) {
    console.error('Error generating PDF:', error);
    return NextResponse.json({ error: 'Failed to generate PDF' }, { status: 500 });
}

}
`

• OS: Windows 11
• Browser chrome
• React-pdf version 4.0.

[andylacko]

same in nextjs 15 with react 18

[andylacko]

@diegomura , any update on this? I see related issues to this

#2784
#2748

[fxrio]

Hi, I also got this error with nextjs 15 and react 18. I downgraded to nextjs 14 and the issue resolved itself.

[Simon-Piquemal]

In the same way, I went back to version 14 and that corrected the problem.

[jpainam]

Same issue. any update?

[ElectricCodeGuy]

Any found a work around? The usual import dynamic from 'next/dynamic'; setting ssr: false does not work :(

[sahil22-3]

same problem

[ElectricCodeGuy]

Workaround is installing the forked:

@alexandernanberg/react-pdf-renderer canary version 4
so
https://www.npmjs.com/package/@alexandernanberg/react-pdf-renderer?activeTab=code

npm install @alexandernanberg/[email protected] --force

and then importing from this package while we wait for maintainer to fix us the bugs

[diegomura]

Closing in favor of #2756