Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: qo is not a function #2978

Open
JacobWeisenburger opened this issue Nov 24, 2024 · 25 comments · Fixed by #2983
Open

TypeError: qo is not a function #2978

JacobWeisenburger opened this issue Nov 24, 2024 · 25 comments · Fixed by #2983

Comments

@JacobWeisenburger
Copy link

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

image

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)
@AtheerAPeter
Copy link

same here, happening since i updated to next 15

@JacobWeisenburger
Copy link
Author

JacobWeisenburger commented Nov 26, 2024

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

image


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)

@diegomura diegomura reopened this Nov 26, 2024
@diegomura
Copy link
Owner

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

@evertjr
Copy link

evertjr commented Nov 27, 2024

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

@pironti
Copy link

pironti commented Nov 28, 2024

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

@vishnut2003
Copy link

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

@evertjr
Copy link

evertjr commented Dec 2, 2024

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

@JacobWeisenburger
Copy link
Author

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?

@alanhaertel
Copy link

alanhaertel commented Dec 11, 2024

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

@rmondi
Copy link

rmondi commented Dec 19, 2024

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"
  }

@kanarian
Copy link

kanarian commented Dec 20, 2024

This worked for me:

typeof window !== 'undefined' && ( // Only render on client side
            <PDFViewer width="100%" height="100%">
              <ResumePDF data={data} />
            </PDFViewer>
          )}

@rmondi
Copy link

rmondi commented Dec 20, 2024

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 !

@pinpos375
Copy link

pinpos375 commented Dec 26, 2024

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 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?

@samadhi1311
Copy link

I recreated the issue here

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

@jakiestfu
Copy link

Bump, this is an issue for us too

@michel-jump
Copy link

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.

@SebastienBrun
Copy link

SebastienBrun commented Jan 1, 2025

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>,
  },
);

@samadhi1311
Copy link

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!

@michel-jump
Copy link

michel-jump commented Jan 2, 2025

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?

@mouchegmouradian
Copy link

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)

@SebastienBrun
Copy link

SebastienBrun commented Jan 2, 2025

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

@michel-jump
Copy link

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.

@mouchegmouradian
Copy link

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

@michel-jump
Copy link

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..

@SebastienBrun
Copy link

SebastienBrun commented Jan 2, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.