Dependency issue - canvas

[ctle-vn]

hey y'all,

thanks for the incredible work put into here. i'm trying to use the package in my nextJS v13.5.3 and react 18.2.0. following the example of:

  return (
    <div>
      <PdfLoader document={url}>
        {(pdfDocument) => (
          <PdfHighlighter
            enableAreaSelection={(event) => event.altKey}
            pdfDocument={pdfDocument}
            utilsRef={(_pdfHighlighterUtils) => {
              highlighterUtilsRef.current = _pdfHighlighterUtils
            }}
            selectionTip={<ExpandableTip />} // Component will render as a tip upon any selection
            highlights={highlights}
          >
            {/* User-defined HighlightContainer component goes here */}
          </PdfHighlighter>
        )}
      </PdfLoader>
    </div>
  )

I see this dependency error around canvas

Failed to compile
./node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/lib/bindings.js:3:0
Module not found: Can't resolve '../build/Release/canvas.node'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/index.js
./node_modules/.pnpm/pdfjs-dist@2.16.105/node_modules/pdfjs-dist/legacy/build/pdf.js
./node_modules/.pnpm/react-pdf-highlighter-extended@8.0.0_react-dom@18.2.0_react@18.2.0/node_modules/react-pdf-highlighter-extended/dist/cjs/components/PdfLoader.js
./node_modules/.pnpm/react-pdf-highlighter-extended@8.0.0_react-dom@18.2.0_react@18.2.0/node_modules/react-pdf-highlighter-extended/dist/cjs/index.js
./components/pdf-viewer.tsx

any ideas what I could be doing wrong here? thanks in advance team.

[ctle-vn]

i ended up installing:

brew install pkg-config cairo pango libpng jpeg giflib librsvg 
pnpm install canvas

which fixed this initial issue but now im getting

Failed to compile
./node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
This error occurred during the build process and can only be dismissed by fixing the error.

any ideas? suspected it might be my next.config.js file

import("./env.mjs")

const { withContentlayer } = require("next-contentlayer")

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*.githubusercontent.com",
      },
      {
        protocol: "https",
        hostname: "*.googleusercontent.com",
      },
    ],
  },
}

module.exports = withContentlayer(nextConfig)

but didnt have any luck

[DanielArnould]

This unfortunately tends to happen a lot with pdf component libraries and next.

Hopefully this helps!

[ctle-vn]

that helped, thank you! for posterity, i also needed to use dynamic imports

const PdfLoader = dynamic(
  () => import("react-pdf-highlighter-extended").then((mod) => mod.PdfLoader),
  { ssr: false }
)
const PdfHighlighter = dynamic(
  () =>
    import("react-pdf-highlighter-extended").then((mod) => mod.PdfHighlighter),
  { ssr: false }
)
const ExpandableTip = dynamic(() => import("./expandable-tip"), { ssr: false })
const HighlightContainer = dynamic(() => import("./highlight-container"), {
  ssr: false,
})

and now im able to render it in my app :)