Cannot resolve "./resvgjs.android-arm64.node" - Cloudflare Pages

[digitdash]

Describe the bug

Im receiving the following error when attempting to build using the official NITRO_PRESET=cloudflare_pages flag for Cloudflare:

Cannot resolve "./resvgjs.android-arm64.node" from "../node_modules/@resvg/resvg-js/js-binding.js" and externals are not allowed!

I had seen a previous bug report opened on this same issue, with a response to use version 1.4.0 of og-images, which I tried as well and can confirm the issue still persists. I tried both with 1.4.0 as well as the latest edition, neither made any difference.

Reproduction

No response

System / Nuxt Info

------------------------------
- Operating System: Linux
- Node Version:     v16.20.2
- Nuxt Version:     3.7.3
- CLI Version:      3.8.4
- Nitro Version:    2.6.3
- Package Manager:  yarn@3.6.3
- Builder:          -
- User Config:      devtools, srcDir, app, modules, css, postcss, build, apollo, runtimeConfig, vite, cloudflareHeaders, site
- Runtime Modules:  @pinia/nuxt@0.4.11, @nuxtjs/tailwindcss@6.8.0, @nuxtseo/module@2.0.0-beta.31, nuxt-og-image@1.4.0, ()
- Build Modules:    -
------------------------------

[Sina-Afsharmanesh]

I had a similar error deploying to Vercel, but the error was for the windows package instead of android.

[harlan-zw]

It seems related to your package manager not installing the correct resvg dependencies for your environment. I think you will need to run the build within the cloudflare page CI

[Sina-Afsharmanesh]

Building locally with Yarn works fine, building on the cloud causes issues. Both Vercel and Cloudflare also use Yarn by default AFAIK.

[harlan-zw]

Good to know thanks! Here is a reference to a similar issue: yisibl/resvg-js#153

[Sina-Afsharmanesh]

So after some investigating, the problem appears to be the Nitro worker presets for Cloudflare, Vercel and apparently Netlify as well. There are several similar issues on the Nitro repo such as: unjs/nitro#293
As for edge deployments, I probably have to look for some ugly workarounds.

Since Not much can be done on this side, it's probably okay to close this one.

[yk-sgr]

Any updates or possible workarounds for this?

[Sina-Afsharmanesh]

Unfortunately not. I even tried manually adding the optional dependencies but they still are not recognized during build time. the only option is to generate static files locally and push them to Cloudflare with Wrangler.

[harlan-zw]

Unfortunately not. I even tried manually adding the optional dependencies but they still are not recognized during build time. the only option is to generate static files locally and push them to Cloudflare with Wrangler.

Would you mind sharing some code? Maybe I can implement this as a fallback

[yk-sgr]

Unfortunately not. I even tried manually adding the optional dependencies but they still are not recognized during build time. the only option is to generate static files locally and push them to Cloudflare with Wrangler.

Which NITRO_PRESET do you use?

With cloudflare_pages it's also failing locally.

[harlan-zw]

Can you confirm how you're deploying your site? Are you building it locally and deploying or using the Cloudflare Pages CI?

I'm not too sure why it thinks the local file exists or why the platform is Android. The relevant logic is here: https://github.com/yisibl/resvg-js/blob/main/js-binding.js

I have a playground for Cloudflare pages up that deploys fine but is having some issues rendering the svg -> png. Cloudflare workers seem to work fin (minus the fonts).

[ghost]

This is my other account (sina-afsharmanesh) that I made for testing CI stuff. I hope you don't mind me replying from this one

Would you mind sharing some code? Maybe I can implement this as a fallback

There is no code really. The problem is resvg-js picks one of the optional libraries based on the environment. For some reason, the problematic Nitro presets (vercel, cloudflare pages, netlify) don't see them as optional and require all of them. But even if they're all installed manually, Nitro still doesn't find them. I looked further into it, Nitro apparently has problems bundling optional dependencies, as mentioned in the issue I referrenced.

Which NITRO_PRESET do you use?

With cloudflare_pages it's also failing locally.

Try SSG rendering with nuxi generate instead of normal SSR building.

Can you confirm how you're deploying your site? Are you building it locally and deploying or using the Cloudflare Pages CI?

I'm not too sure why it thinks the local file exists or why the platform is Android. The relevant logic is here: https://github.com/yisibl/resvg-js/blob/main/js-binding.js

I have a playground for Cloudflare pages up that deploys fine but is having some issues rendering the svg -> png. Cloudflare workers seem to work fin (minus the fonts).

Currently what seems to work with Cloudflare Pages is SSG rendering locally, then uploading them to cloudflare pages with Wrangler. Normal SSR building seems to fail both locally and on edge with the presets. The Cloudflare Workers preset does work fine, but since Pages came out Cloudflare has been recommending Pages for fullstack apps instead of Workers. I have not tested the Cloudflare Module Workers preset.

EDIT: Some corrections.

[yk-sgr]

Can you confirm how you're deploying your site? Are you building it locally and deploying or using the Cloudflare Pages CI?

I'm not too sure why it thinks the local file exists or why the platform is Android. The relevant logic is here: https://github.com/yisibl/resvg-js/blob/main/js-binding.js

I have a playground for Cloudflare pages up that deploys fine but is having some issues rendering the svg -> png. Cloudflare workers seem to work fin (minus the fonts).

I'm getting the error on Cloudflare and local if I use "NITRO_PRESET=cloudflare_pages" and npm run build

Try SSG rendering with nuxi generate instead of normal SSR building.

Works!

[harlan-zw]

This should be resolved with the latest version of nuxt-og-image / @nuxtseo/module.

The v3 major was a complete overhaul of how the bindings work so should be a lot more stable.