Azgaar / Armoria

Heraldry generator and editor
https://azgaar.github.io/Armoria
280 stars 30 forks source link

SVG conversion on Edge #177

Open Azgaar opened 3 months ago

Azgaar commented 3 months ago

Hi @Blipz,

I've managed to deploy the #169 to Vercel and to fix most of the issues, however it looks we won't be able to use convert-svg-to-png as Vercel uses Edge runtime and I'm not sure it can handle and run a full Chromium browser. Locally it works fine, but on Edge the Puppeteer throws the error Could not find expected browser (chrome) locally. Runnpm installto download the correct Chromium revision. It wants to launch browser, but it looks it cannot do it.

Do you have any ideas?

Test URLs:

Blipz commented 3 months ago

I guess we need to add chrome-aws-lambda as a dependency.

Also, in the createConverter call, puppeteer options can be passed if needed:

import chromium from 'chrome-aws-lambda';

convertToPng.createConverter({
  executablePath: await chromium.executablePath,
  // other options
});

From what I read, there is a potential issue with a 50 MB size limit too, that can be solved by using specific versions of puppeteer-core. However, as the puppeteer import is handled by convert-svg, it may be difficult to overcome.

See https://gist.github.com/kettanaito/56861aff96e6debc575d522dd03e5725 for instance.

Azgaar commented 3 months ago

I've tried a few ideas, not no success. The same error:

Error: Could not find expected browser (chrome) locally. Run `npm install` to download the correct Chromium revision (982053).
    at ChromeLauncher.launch (/var/task/node_modules/convert-svg-core/node_modules/puppeteer/lib/cjs/puppeteer/node/Launcher.js:105:23)
    at async [getPage] (/var/task/node_modules/convert-svg-core/src/Converter.js:364:24)
    at async [convert] (/var/task/node_modules/convert-svg-core/src/Converter.js:283:18)
    at async Converter.convert (/var/task/node_modules/convert-svg-core/src/Converter.js:185:12)
    at async send (file:///var/task/.svelte-kit/output/server/entries/endpoints/api/_server.ts.js:47:23)
    at async render_endpoint (file:///var/task/.svelte-kit/output/server/index.js:262:20)
    at async resolve2 (file:///var/task/.svelte-kit/output/server/index.js:2739:22)
    at async Object.handle (file:///var/task/.svelte-kit/output/server/chunks/hooks.server.js:2:20)
    at async respond (file:///var/task/.svelte-kit/output/server/index.js:2634:22)
    at async Server.default (file:///var/task/.svelte-kit/vercel-tmp/index.js:40:3)
Blipz commented 3 months ago

Does executablePath contain something useful?

Maybe it is null because the environment is not considered a serverless one (see https://github.com/alixaxel/chrome-aws-lambda/wiki/HOWTO:-Local-Development)

Azgaar commented 3 months ago

Checked, Chromium path: /tmp/chromium. So it looks fine, but still doesn't work. Do you have any ideas? I believe we will have to switch back to an old renderer.

Blipz commented 3 months ago

Maybe https://www.npmjs.com/package/@sparticuz/chromium would work better? Other than that, I don't have any ideas.