Closed ctle-vn closed 3 months ago
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
This unfortunately tends to happen a lot with pdf component libraries and next.
Hopefully this helps!
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 :)
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:
I see this dependency error around
canvas
any ideas what I could be doing wrong here? thanks in advance team.