Running on Vercel

[clacladev]

I have installed [email protected] in a Next.js app (14.2.15) with pages router.

When I run the app locally, Skia-cavas is able to produce the images correctly. But when I try to pnpm run build it fails with the following message. Both when I build locally and when I build it as part of a Vercel deployment.

   Creating an optimized production build ...
Failed to compile.
./node_modules/.pnpm/[email protected]/node_modules/skia-canvas/lib/classes/neon.js:15:1
Module not found: Can't resolve '../v8'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/skia-canvas/lib/classes/canvas.js
./node_modules/.pnpm/[email protected]/node_modules/skia-canvas/lib/index.js
./node_modules/.pnpm/[email protected]/node_modules/skia-canvas/lib/index.mjs
./src/pages/api/token-og.tsx
> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

Is there any configuration that is missing?

[samizdatco]

I'm not familiar with how Next.js handles bundling js for the client vs managing its serverside dependencies (and it's also unclear to me which context you're trying to use the canvas from). Do you think you might be able to create a minimal test project that demonstrates the bug so I can investigate?

[loveloki]

It sounds like there shouldn't be a problem, what about using npm?

I created a test repository(canvas-test) that can be deployed in vercel

[Topgt]

我在nextjs中也遇到相同的问题，我的原因是webpage无法正确处理.node文件，因此只需要修改next.config.js配置就能解决

// next.config.js
module.exports  = {
 webpack: (config, options) => {
    // 需要排除某些模块
    config.externals = config.externals || [];
    config.externals.push({'skia-canvas': 'commonjs skia-canvas', });
  }
}

[samizdatco]

Using skia-canvas on Vercel should be easier as of the 3.0 release. The node module now statically links system libraries that were previously available in the Vercel build context but not as part of its edge runtime.

The main wrinkles you're likely to run into at this point involve bundling and alternative package managers. See the docs for details on:

• approving the module’s build script when installing with pnpm
• including the native library as an ‘external’ while bundling with Webpack