react-pdf TypeError: qo is not a function

Every time I save I get this error: TypeError: qo is not a function

Then I have to reload the page and everything works again until I save again.

Here's the full error stack.

TypeError: qo is not a function
    at ml (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:3425:155)
    at Ol (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:3917:25)
    at Ml (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:3845:29)
    at Hl (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:3860:21)
    at ga (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:4428:35)
    at http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:4395:38
    at pa (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:4396:18)
    at Yl (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:4109:13)
    at $l (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:4096:29)
    at Re (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:916:31)
    at Ce (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:866:92)
    at Ya.flushSyncWork (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:5540:48)
    at Object.updateContainer (http://localhost:3000/_next/static/chunks/node_modules_@react-pdf_reconciler_lib_cdf250._.js:5614:50)
    at Object.updateContainer (http://localhost:3000/_next/static/chunks/node_modules_ea10b4._.js:19011:18)
    at usePDF.useCallback[update] (http://localhost:3000/_next/static/chunks/node_modules_ea10b4._.js:19220:33)
    at PDFViewer.useEffect (http://localhost:3000/_next/static/chunks/node_modules_ea10b4._.js:19232:36)
    at react-stack-bottom-frame (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:12439:22)
    at runWithFiberInDEV (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:631:20)
    at commitHookEffectListMount (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:5817:628)
    at commitHookPassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:5852:60)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6756:33)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6789:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6789:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6789:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6789:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)

Nov 24 '24 22:11 JacobWeisenburger

same here, happening since i updated to next 15

Nov 25 '24 16:11 AtheerAPeter

Still getting the same error after updating to @react-pdf/renderer: 4.1.5

the code I'm using to test this

'use client'

import { Document, Page, PDFViewer, StyleSheet, Text, View } from '@react-pdf/renderer'

export default function Home () {
    return <PDFViewer {...{
        style: {
            width: '100dvw',
            height: '100dvh',
        },
    }}>
        <MyDocument />
    </PDFViewer>
}

function MyDocument () {
    const styles = StyleSheet.create( {
        page: {
            flexDirection: 'row',
            // backgroundColor: '#E4E4E4',
        },
        section: {
            margin: 10,
            padding: 10,
            flexGrow: 1,
        },
    } )

    return <Document>
        <Page size='A4' style={styles.page}>
            <View style={styles.section}>
                <Text>Section #1</Text>
            </View>
            <View style={styles.section}>
                <Text>Section #2</Text>
            </View>
        </Page>
    </Document>
}

dependencies

"dependencies": {
    "@react-pdf/renderer": "^4.1.5",
    "next": "15.0.3",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106"
},
"devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
}

full error stack

TypeError: qo is not a function
    at ml (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:3425:155)
    at Ol (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:3917:25)
    at Ml (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:3845:29)
    at Hl (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:3860:21)
    at ga (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:4428:35)
    at http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:4395:38
    at pa (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:4396:18)
    at Yl (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:4109:13)
    at $l (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:4096:29)
    at Re (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:916:31)
    at Ce (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:866:92)
    at Ya.flushSyncWork (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:5540:48)
    at Object.updateContainer (http://localhost:3000/_next/static/chunks/9037f_@react-pdf_reconciler_lib_3be79f._.js:5614:50)
    at Object.updateContainer (http://localhost:3000/_next/static/chunks/node_modules_efa1a4._.js:19011:18)
    at usePDF.useCallback[update] (http://localhost:3000/_next/static/chunks/node_modules_efa1a4._.js:19220:33)
    at PDFViewer.useEffect (http://localhost:3000/_next/static/chunks/node_modules_efa1a4._.js:19232:36)
    at react-stack-bottom-frame (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:12439:22)
    at runWithFiberInDEV (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:631:20)
    at commitHookEffectListMount (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:5817:628)
    at commitHookPassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:5852:60)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6756:33)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6789:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6789:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6789:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6789:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)
    at commitPassiveMountOnFiber (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6755:17)
    at recursivelyTraversePassiveMountEffects (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_1f56dc._.js:6747:106)

Nov 26 '24 15:11 JacobWeisenburger

Thanks. I reopened this. I'll investigate as soon as I can

Nov 26 '24 15:11 diegomura

I'm getting this error too on Next 15. Any idea what triggers this and there's any workaround?

Nov 27 '24 20:11 evertjr

Same here using next 15 with react 19. Any ideias?

Nov 28 '24 20:11 pironti

This error is because of change in state. I fixed it by doing conditional rendering.

Nov 29 '24 14:11 vishnut2003

I downgraded the project to Next 14 in the meantime and it stoped the problem, so it is clearly some incompatibility with Next 15 / React 19

Dec 02 '24 13:12 evertjr

This error is because of change in state. I fixed it by doing conditional rendering.

Could you and a code example of what you mean?

Dec 06 '24 12:12 JacobWeisenburger

Same error here. Using NextJS 15.1.0 with stable React 19 version and @react-pdf/renderer: 4.1.5

Edit: Im using the PDFDownloadLink component and mapping data into rows. I encountered this issue when storing the data in a useState. I switched to using Nanostores for state management, and it works fine now. It seems there is a compatibility issue between the library and React's internal state management

Dec 11 '24 15:12 alanhaertel

Hello everybody !

I'm facing this problem too.

Is there any solution to this problem ?

This error is because of change in state. I fixed it by doing conditional rendering.

@vishnut2003 Can you please provide a example ?

Here is my package.json:

"dependencies": {
    "@gsap/react": "^2.1.1",
    "@react-pdf/renderer": "^4.1.5",
    "formik": "^2.4.6",
    "gsap": "^3.12.5",
    "lucide-react": "^0.468.0",
    "next": "15.0.3",
    "next-international": "^1.3.1",
    "query-string": "^9.1.1",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106",
    "react-google-recaptcha-v3": "^1.10.1",
    "react-intersection-observer": "^9.13.1",
    "resend": "^4.0.1",
    "sass": "^1.81.1",
    "swiper": "^11.1.15",
    "uuid": "^11.0.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.3",
    "typescript": "^5"
  }

Dec 19 '24 11:12 rmondi

Hello @kanarian, thanks for your answer but it didn't helped me.

I solved the problem by importing PDFViewer dynamically in order to prevent module to be imported on server side : https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic

PDFViewer.tsx :

import { PDFViewer } from "@react-pdf/renderer";
export default PDFViewer;

page.tsx :

import dynamic from "next/dynamic";
import Loader from "@/app/components/Loader/Loader";
import MyDocument from "@/app/components/MyDocument/MyDocument";

const PDFViewer = dynamic( () => import( "@/app/components/PDFViewer/PDFViewer" ), {
  loading: () => <Loader fullscreen={ true } />,
  ssr: false
} );

const Home = () => {
  return (
    <PDFViewer width="100%" height="100%">
      <MyDocument />
    </PDFViewer>
  )
}

Hope this will help !

Dec 20 '24 16:12 rmondi

The same error occurs in vite js: TypeError: qo is not a function at ml (@react-pdf_renderer.js?v=0b4fceb0:96461:158) at ml (@react-pdf_renderer.js?v=0b4fceb0:96461:44) at ml (@react-pdf_renderer.js?v=0b4fceb0:96461:44) at Ol (@react-pdf_renderer.js?v=0b4fceb0:96953:15) at Ml (@react-pdf_renderer.js?v=0b4fceb0:96881:20) at Hl (@react-pdf_renderer.js?v=0b4fceb0:96905:11) at Ml (@react-pdf_renderer.js?v=0b4fceb0:96885:71) at Hl (@react-pdf_renderer.js?v=0b4fceb0:96905:11) at Ml (@react-pdf_renderer.js?v=0b4fceb0:96885:71) at Hl (@react-pdf_renderer.js?v=0b4fceb0:96905:11)

The above error occurred in the <PDFViewer> component.

React will try to recreate this component tree from scratch using the error boundary you provided, CatchBoundaryImpl.

defaultOnCaughtError @ react-dom_client.js?v=0b4fceb0:5613 logCaughtError @ react-dom_client.js?v=0b4fceb0:5648 runWithFiberInDEV @ react-dom_client.js?v=0b4fceb0:726 inst.componentDidCatch.update.callback @ react-dom_client.js?v=0b4fceb0:5693 callCallback @ react-dom_client.js?v=0b4fceb0:7725 commitCallbacks @ react-dom_client.js?v=0b4fceb0:7737 runWithFiberInDEV @ react-dom_client.js?v=0b4fceb0:726 commitClassCallbacks @ react-dom_client.js?v=0b4fceb0:7850 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8289 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8370 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8238 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8370 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8363 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8350 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8370 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8370 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8370 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8234 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8370 recursivelyTraverseLayoutEffects @ react-dom_client.js?v=0b4fceb0:8987 commitLayoutEffectOnFiber @ react-dom_client.js?v=0b4fceb0:8294 commitLayoutEffects @ react-dom_client.js?v=0b4fceb0:8981 commitRootImpl @ react-dom_client.js?v=0b4fceb0:11053 commitRoot @ react-dom_client.js?v=0b4fceb0:10989 commitRootWhenReady @ react-dom_client.js?v=0b4fceb0:10477 performWorkOnRoot @ react-dom_client.js?v=0b4fceb0:10421 performSyncWorkOnRoot @ react-dom_client.js?v=0b4fceb0:11448 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=0b4fceb0:11356 processRootScheduleInMicrotask @ react-dom_client.js?v=0b4fceb0:11375 (anonymous) @ react-dom_client.js?v=0b4fceb0:11459Understand this errorAI "@react-pdf/renderer": "^4.1.5", "react": "^19.0.0", Anyone found a solution?

Dec 26 '24 13:12 pinpos375

I recreated the issue here

So, What I'm trying to do here is to render <PDFDownloadLink> based on the selected template. But as soon as I change the template I get this error.

Dec 29 '24 16:12 samadhi1311

Bump, this is an issue for us too

Dec 31 '24 01:12 jakiestfu

This is also an issue for me. I am using PDFDownloadLink. First time loading the page, no problem, but navigating to another page and back, it gives the same error.

Dec 31 '24 13:12 michel-jump

I have nextJS 15 and react 19. Did you try :

import dynamic from "next/dynamic";


const PDFViewer = dynamic(
  () => import("@react-pdf/renderer").then((mod) => mod.PDFViewer),
  {
    ssr: false,
    loading: () => <p>Loading...</p>,
  },
);

Jan 01 '25 17:01 SebastienBrun

I have nextJS 15 and react 19. Did you try :

import dynamic from "next/dynamic";


const PDFViewer = dynamic(
  () => import("@react-pdf/renderer").then((mod) => mod.PDFViewer),
  {
    ssr: false,
    loading: () => <p>Loading...</p>,
  },
);

This works without any issues. Thank you for sharing!

Jan 01 '25 17:01 samadhi1311

I have nextJS 15 and react 19. Did you try :

import dynamic from "next/dynamic";


const PDFViewer = dynamic(
  () => import("@react-pdf/renderer").then((mod) => mod.PDFViewer),
  {
    ssr: false,
    loading: () => <p>Loading...</p>,
  },
);

I tried it and it solves the issue, but you need to set experimental.esmExternals to loose. How save is it to run that in production?

Jan 02 '25 07:01 michel-jump

This is also an issue for me. I am using PDFDownloadLink. First time loading the page, no problem, but navigating to another page and back, it gives the same error.

@michel-jump Here is how I "fixed it": https://github.com/diegomura/react-pdf/pull/2888#issuecomment-2547389099

Jan 02 '25 07:01 mouchegmouradian

You're right, i had issue too. Finally what i did :

Remove loose from my nextjs config (turbo pack doesn't support it)

I create a file pdfViewer.tsx with only these line :

import { PDFViewer } from "@react-pdf/renderer";

export default PDFViewer;

Then I create a new file Exemple.tsx and import it as follow :

import dynamic from "next/dynamic";
const PDFViewer = dynamic(() => import("../testpdf/pdfViewer"), {
  ssr: false,
});
  return (
    <div>
      <PDFViewer style={{ width: "100%", height: "100vh" }}>
<MyDocument />
      </PDFViewer>
    </div>
  );

The following path "../testpdf/pdfViewer" is where is your pdfViewer.tsx

Jan 02 '25 08:01 SebastienBrun

This is also an issue for me. I am using PDFDownloadLink. First time loading the page, no problem, but navigating to another page and back, it gives the same error.

@michel-jump Here is how I "fixed it": #2888 (comment)

Yeah, that's the linting part, but the TypeError: qo is not a function doesn't show in the lint. It only bubbles up when navigating back to the page with the PDFDownloadLink element.

Jan 02 '25 08:01 michel-jump

Oh right my bad, read through it too quickly. Had the same issue. I ended up removing the download button...

Jan 02 '25 08:01 mouchegmouradian

You're right, i had issue too. Finally what i did :

Remove loose from my nextjs config (turbo pack doesn't support it)

I create a file pdfViewer.tsx with only these line :
import { PDFViewer } from "@react-pdf/renderer";

export default PDFViewer;
Then I create a new file Exemple.tsx and import it as follow :
import dynamic from "next/dynamic";
const PDFViewer = dynamic(() => import("../testpdf/pdfViewer"), {
  ssr: false,
});
  return (
    <div>
      <PDFViewer style={{ width: "100%", height: "100vh" }}>
<MyDocument />
      </PDFViewer>
    </div>
  );
The following path "../testpdf/pdfViewer" is where is your pdfViewer.tsx

Craziest thing is: I had that solution implemented before my first comment here.. It consistently gave me the error. But somehow, I now only get the error the first time after a dev build with this solution.. It beats me..

Jan 02 '25 08:01 michel-jump

ha ha ha, i do understand !

Did you try to do a very simple document PDF for the begining ? Because sometime it is hard to know if this is the nextjs config or if it is because of the PDF document

Jan 02 '25 08:01 SebastienBrun

ha ha ha, i do understand !

Did you try to do a very simple document PDF for the begining ? Because sometime it is hard to know if this is the nextjs config or if it is because of the PDF document

Yes I have removed all the possible problematic stuff. Now the document is very simple. It is a View with 3 Text objects.

Where should I look for in the NextJS config?

Jan 02 '25 09:01 michel-jump

I did a test for you, Let me share my config because, it works for me.

package.json :

    "@react-pdf/renderer": "^4.1.6",
     "react": "19.0.0",
    "react-dom": "19.0.0",
"next": "15.1.3",

Next config :

const nextConfig = {

  reactStrictMode: false,

  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js'
        }
      },
    }
  },

  //Use for the BUILD PROD
  webpack(config) {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.('.svg'),
    );

    config.module.rules.push(
      // Convert all other *.svg?icon imports to React components
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: /icon/, // *.svg?icon
        use: ['@svgr/webpack'],
      },
      // Reapply the existing rule, for all other *.svg imports
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: { not: /icon/ }, // exclude if *.svg?icon
      },
    );

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  },

  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "i.giphy.com",
      },
    ],
  },
};

export default nextConfig;

"use client";

import dynamic from "next/dynamic";

import { Text, View, Document, Page } from "@react-pdf/renderer";


const PDFViewer = dynamic(() => import("./pdfViewer"), {
  ssr: false
});


export default function PagePDF() {

  

  return (
    <div>
      <PDFViewer style={{ width: "100%", height: "100vh" }}>

      <Document><Page><View><Text>Test</Text></View></Page></Document>

      </PDFViewer>
    </div>
  );
}

pdfViewer.tsx

import { PDFViewer } from "@react-pdf/renderer";

export default PDFViewer;

Jan 02 '25 09:01 SebastienBrun

Much appreciated @SebastienBrun! I am going to debug with those settings.

Jan 02 '25 11:01 michel-jump

Thank you @SebastienBrun! I was able to use your method to fix my issue. I can confirm this works on static export which I deployed to Cloudflare Pages.

Here's the result: A small project I'm working on.

Jan 02 '25 11:01 samadhi1311

Great!

@samadhi1311 Nice website !

Jan 02 '25 12:01 SebastienBrun

Thank you @SebastienBrun !! 🖤🖤

Jan 03 '25 07:01 samadhi1311

react-pdf react-pdf copied to clipboard

TypeError: qo is not a function

the code I'm using to test this

dependencies

full error stack

react-pdf
react-pdf copied to clipboard