Vite [ERROR] No loader is configured for ".node" files: node_modules/canvas/build/Release/canvas.node

[Toxyc]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Recently, I migrated our project from CRA to Vite. I have tried to use v5, v6 and v7 of react-pdf. But none of them seem to work. I have folllowed the documentation guidelines for Vite but I get this error in console.

I found some other people having similar issues in NextJS in this repo, but is there a fix for Vite? And is anyone else having this issue?

I've tried installing canvas as a package myself, also to no avail.

✘ [ERROR] No loader is configured for ".node" files: node_modules/canvas/build/Release/canvas.node

    node_modules/canvas/lib/bindings.js:3:25:
      3 │ const bindings = require('../build/Release/canvas.node')
        ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

12:36:46 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/canvas/lib/bindings.js:3:25: ERROR: No loader is configured for ".node" files: node_modules/canvas/build/Release/canvas.node

Steps to reproduce

1. Create vite project
2. Use react, node and vite versions that i am using
3. Install react-pdf
4. Try to compile after using react-pdf import in a react component

Expected behavior

I expected Vite to compile and not crash.

Actual behavior

Vite does not compile because of react-pdf dependency canvas having issues.

Environment

• Using Chrome on a 2019 Macbook Sonoma 14.1.2
• React 17.0.2
• Node 20.12.1
• React-pdf 7.7.1
• Vite 5.2.8