Error : build: Module not found: Can’t resolve ‘../build/Release/canvas.node’

[mz-chansm]

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

• next.js 13.4
• turborepo
• node 18.4

Two out of ten people had this error. I merged it into the development and installed it, but there was an error. The two are using m1 mac The error name is as follows. error :platform:build: Module not found: Can’t resolve ‘../build/Release/canvas.node’

As you told me, the setting is as follows.

next.config.js

module.exports = {
  reactStrictMode: true,
  transpilePackages: ['ui'],
  output: 'export',
  trailingSlash: true,
  webpack: (config) => {
    config.module.rules.push({
      test: /\.node/,
      use: {
        loader: 'raw-loader',
      },
    })

    return config
  },
}

package.json

  "dependencies": {
 "react-pdf": "^7.3.3",
},
  "devDependencies": {
    "raw-loader": "^4.0.2",
  }
}

pdf.tsx

'use client'
import { pdfjs, Document, Page } from 'react-pdf'
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css'

import { File, OnPasswordCallback, PasswordResponse } from 'react-pdf/dist/cjs/shared/types'
import { useState } from 'react'

pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString()

type OnPassword = (callback: OnPasswordCallback, reason: PasswordResponse) => void
const PdfViewer = () => {
.../
  const [file, setFile] = useState<File>('/sample2.pdf')
     return (
    <>
      <div id="pdfWrap">
        <Document file={file} onLoadSuccess={onDocumentLoadSuccess} onPassword={onPassword}>
          <Page renderTextLayer={false} pageNumber={pageNumber} />
        </Document>
      </div>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </>
  )
}

Steps to reproduce

1. Import PdfViwer from another component
2. when pnpm build => error

Expected behavior

N/A

Actual behavior

N/A

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Webpack version (if applicable):

[jtaox]

I have the same problem that's been solved here https://github.com/Automattic/node-canvas/issues/1825#issuecomment-1090125736

[mz-chansm]

I have the same problem that's been solved here Automattic/node-canvas#1825 (comment)

thank you why reason? only m1 mac issue ?

[jtaox]

I have the same problem that's been solved here Automattic/node-canvas#1825 (comment)

thank you why reason? only m1 mac issue ?

prebuilds node-canvas dependency is not compatible with ARM CPU.
I only encountered this issue on m1 mac.

[mortocks]

Does this mean there are potential deployment issues when using this library i.e. can you deploy to netlify vercel etc or do you need to create a more customised install environment?

[wojtekmaj]

I have just added functional Next.js samples in fc18d18132882e9a7bfb4d2d9a8cd16e8186bf32. Builds just fine on my M2 Mac. Check if these are working for you as well.

In the meantime, I'm closing this; if samples aren't working in some configurations, we will look at them instead.