BindingError

[jonnny013]

I recently ran the latest update (4.0.0) and everything works fine, but I get the annoying bug in the console for a binding error: "Expected null or instance of Config, got an instance of Config" Stack trace[0] Error. (http://localhost:3000/node_modules/.vite/deps/@react-pdf_renderer.js?v=5fc542da:85453:13)

It doesn't seem to be causing any issues, I just like to keep the console clean and I don't have a clue what the issue is.

I am happy to add on more information, but I don't know what information would be helpful for this.

[jstorm31]

I started getting this error too with @react-pdf/[email protected].

Edit: upgrading to version 4.0.0 didn't help.

Edit 2: I was rendering multiple PDFs with Promise.all. Generating them sequentially in for...of loop helped.

[pontageorge]

I get this error and the PDViewer actually fails to render my PDF ocassionally and I have no idea why.

[HuguesBlanco]

I’m encountering the same issue

• @react-pdf/renderer: 3.4.4
• vite: 5.4.8
• Chrome: 129.0.6668.70

I use a <Document> component in both a <PDFViewer> and a <PDFDownloadLink>, and it seems that rendering them simultaneously might be causing the error.

If I remove one, the error goes away.
Rendering them sequentially, as @jstorm31 suggested, also fixes it. (I tested this using a setTimeout).

Are you all also using multiple <Document> components?

[pontageorge]

I was the same way as you with a <PDFViewer> and a <PDFDownloadLink>. Now I just have the PDFViewer, still encountering the issue unfortunately. Also, update to the PDF state don't trigger a rerender of the PDFViewer, not sure if it's related or not or it wasn't supposed to do that anyways.

[FastRives]

Hello everyone,

I encountered the same issue and resolved it by redefining the <img /> component. The previous version no longer accepted a src with a URL, so to fix the problem, I converted my image into a Base64 string, and now it works good.

I'm not sure if you're facing the same issue, but this approach might be worth exploring.

Best regards, FastRives.

[HuguesBlanco]

Hi everyone,

After further investigation, I came across this pull request, which provides more insight into the issue: https://github.com/diegomura/react-pdf/pull/2878. It appears that the problem is related to Yoga's initialization. A fix has been submitted and is currently awaiting merge.

[luokelong]

Hi everyone,

After further investigation, I came across this pull request, which provides more insight into the issue: #2878. It appears that the problem is related to Yoga's initialization. A fix has been submitted and is currently awaiting merge.

I encountered the same problem. But the difference with you is that the problem mentioned in #2890 also occurred at all the time, and this BindingError occurred only some time. I'm guessing there's some connection between these two issues.

Without a doubt, you are the best.

[JohnFoster44]

I'm getting this error on Firefox just using the PDFDownloadLink. Stopping the PDF from being downloaded unless I refresh.

[HuguesBlanco]

Hi everyone, After further investigation, I came across this pull request, which provides more insight into the issue: #2878. It appears that the problem is related to Yoga's initialization. A fix has been submitted and is currently awaiting merge.

I encountered the same problem. But the difference with you is that the problem mentioned in #2890 also occurred at all the time, and this BindingError occurred only some time. I'm guessing there's some connection between these two issues.

Without a doubt, you are the best.

@luokelong, I haven’t encountered the second error you mentioned. Regarding the first issue, I agree that it varies. Sometimes it happens once, other times twice. I suspect this variation is due to how long my machine takes to load and render the documents, which might affect the error trigger.

[R-zine]

I was running into this issue and discovered that wrapping the whole component that calls react-pdf in a Suspense fixes the issue for me. I'm using the PDF download button, registering fonts and programatiically changing what PDF is rendered from inside the component.

[m-battista]

I was running into this issue and discovered that wrapping the whole component that calls react-pdf in a Suspense fixes the issue for me. I'm using the PDF download button, registering fonts and programatiically changing what PDF is rendered from inside the component.

Can u show how you set the <Suspanse/>? Cause I tried in different ways but not resolved. I'm using it with PDFDownloadLink

[m-battista]

Same problem, I tried with all different https://react-pdf.org/advanced#on-the-fly-rendering ways

[jonnny013]

Lots of helpful replies! I have both the viewer and download button activated and respond to user input at the same time. As pointed out before, if you render multiple PDFs it will cause this issue. When I removed the Viewer, the error message went away. Thank you guys for finding the issue!! Now to wait for the pull request to be accepted.

[logan-jobzmall]

Hey everyone, we all know this this is still a problem but I think I may have found a solution (at least for me, which I am using the hook + PDFDownloadLink).

I realized that I wasn't using V4.0.0 and I started getting this after a new install of @react-pdf/renderer 3.4.4. Which was odd, because it was working with MAJOR testing on my other project.

After much trial and error, I made sure that every single package dependency for react-pdf that I had I locked into my prior package.lock and I stopped having the issue. Here my package.json - please give it a try and let me know if it fixes your issues:

    "@react-pdf/render": "3.4.4",
    "@react-pdf/layout": "3.12.1",
    "@react-pdf/fns": "2.2.1",
    "@react-pdf/font": "2.5.1",
    "@react-pdf/image": "2.3.6",
    "@react-pdf/pdfkit": "3.1.10",
    "@react-pdf/png-js": "2.3.1",
    "@react-pdf/primitives": "3.1.1",
    "@react-pdf/stylesheet": "4.2.5",
    "@react-pdf/textkit": "4.4.1",
    "@react-pdf/types": "2.5.0",
    

[HuguesBlanco]

Thanks for the pointer, @logan-jobzmall!

After reviewing the history of @react-pdf/layout, I found this bug was introduced in version 3.13.0.
Downgrading @react-pdf/layout to version 3.12.1 resolved the issue on my end.

Here’s the configuration that worked:

"@react-pdf/layout": "3.12.1",
"@react-pdf/renderer": "3.4.4"

[ngamsomset]

still having this issue. Version 4.0.0.

But this warning only happen when the page refresh. (not happen when normal navigation.) Not happen every single time though...

I use usePDF to download the PDF and send to email but didn't render it on the page.

[HuguesBlanco]

Hi @ngamsomset,

@react-pdf/renderer version 4.0.0 includes "@react-pdf/layout": "^4.0.0" as a dependency. To avoid bindingErrors, you’ll need to use a version of @react-pdf/renderer that allows @react-pdf/layout version 3.12.1. The last compatible version for this setup is @react-pdf/renderer 3.4.4.
To bypass the bug, set both "@react-pdf/layout": "3.12.1" and "@react-pdf/renderer": "3.4.4" in your dependencies.

If you absolutely need to use @react-pdf/renderer version 4, you’ll need to render PDFs sequentially as a workaround. @jmezzacappa shared an example of this sequential rendering approach here: https://github.com/diegomura/react-pdf/pull/2878#issuecomment-2391624895.

[ngamsomset]

@HuguesBlanco the warning is no longer appear once set to those version. Just out of curiosity, is the fix coming up for the next version?

[HuguesBlanco]

@ngamsomset, glad it’s working for you! I have no specific info. What you can do is subscribe to the linked pull request thread ( https://github.com/diegomura/react-pdf/pull/2878). So you would be informed about any progress.

[remy-tl]

Hello guys! I have the very same "binding error" as you guys, but in my case it says the error comes from here: /static/js/vendors-node_modules_mui_icons-material_esm_HowToReg_js-node_modules_mui_icons-material_esm_P-16b7d4.chunk.js:12432:15 It's so weird it mentions material-icons... I don't use material-icons in my PDF. (I use it in the project, but not in the PDF). I tried @HuguesBlanco

To bypass the bug, set both "@react-pdf/layout": "3.12.1" and "@react-pdf/renderer": "3.4.4" in your dependencies.

with no luck... And it behaves the same: sometimes it works, sometimes it doesn't...

[logan-jobzmall]

Hello guys! I have the very same "binding error" as you guys, but in my case it says the error comes from here: /static/js/vendors-node_modules_mui_icons-material_esm_HowToReg_js-node_modules_mui_icons-material_esm_P-16b7d4.chunk.js:12432:15 It's so weird it mentions material-icons... I don't use material-icons in my PDF. (I use it in the project, but not in the PDF). I tried @HuguesBlanco

To bypass the bug, set both "@react-pdf/layout": "3.12.1" and "@react-pdf/renderer": "3.4.4" in your dependencies.

with no luck... And it behaves the same: sometimes it works, sometimes it doesn't...

@remy-tl - triple check your package-lock.json to see the resolved versions just in case.

[remy-tl]

Hello guys! I have the very same "binding error" as you guys, but in my case it says the error comes from here: /static/js/vendors-node_modules_mui_icons-material_esm_HowToReg_js-node_modules_mui_icons-material_esm_P-16b7d4.chunk.js:12432:15 It's so weird it mentions material-icons... I don't use material-icons in my PDF. (I use it in the project, but not in the PDF). I tried @HuguesBlanco

To bypass the bug, set both "@react-pdf/layout": "3.12.1" and "@react-pdf/renderer": "3.4.4" in your dependencies.

with no luck... And it behaves the same: sometimes it works, sometimes it doesn't...

@remy-tl - triple check your package-lock.json to see the resolved versions just in case.

@logan-jobzmall thanks for the reply. Every time I tried a different version a reinstalled everything from scratch with: rm yarn.lock && rm -rf node_modules/ && yarn (changing version in package.json)

[AlejandroYYWireless]

Thanks for the pointer, @logan-jobzmall!

After reviewing the history of @react-pdf/layout, I found this bug was introduced in version 3.13.0. Downgrading @react-pdf/layout to version 3.12.1 resolved the issue on my end.

Here’s the configuration that worked:

"@react-pdf/layout": "3.12.1", "@react-pdf/renderer": "3.4.4"

This is the solution. ❤️😎