Still gets `__dirname is not defined` with pnpm, even with canvaskit-wasm installed.
Hello,
I am currently having trouble building the og image using pnpm. I tried using yarn as well, but it still emits the same error. What seems to be the problem?
Log:
prerendering static routes
16:27:58 λ src/pages/open-graph/[...route].ts
16:27:58 ├─ /open-graph/index.webp[astro-og-canvas] Loading https://api.fontsource.org/v1/fonts/noto-sans/latin-400-normal.ttf
__dirname is not defined
This error is often thrown when using PNPM without installing `canvaskit-wasm` directly.
Install this required dependency by running `pnpm add canvaskit-wasm`
Stack trace:
at <project_dir>/dist/_worker.js/chunks/canvaskit_CYRnvOrJ.mjs:173:67
at async #updateManager (<project_dir>/dist/_worker.js/pages/open-graph/_---route_.astro.mjs?time=1743926238507:531:27)
at async generateOpenGraphImage (<project_dir>/dist/_worker.js/pages/open-graph/_---route_.astro.mjs?time=1743926238507:679:21)
at async renderEndpoint (<project_dir>/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/endpoint.js:37:18)
at async <project_dir>/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/astro/dist/i18n/middleware.js:49:22
Thanks for the issue @Taewan-P. Could you share a minimal reproduction?
Hi @delucis, I am trying to reproduce it by creating a clean repo... But it somehow works on the new repo. 🫠 It just doesn't work on my active project...
I was troubleshooting this the whole day today, and figured out that the @astrojs/cloudflare package is somehow causing the problem. Eventually, the problem was related to #35, but I was totally unaware of it since the final error message was totally different compared to the issue.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:path" imported from "node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/@astrojs/starlight/utils/collection.ts". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:url" imported from "node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/@astrojs/starlight/utils/collection.ts". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:fs/promises" imported from "node_modules/.pnpm/[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/astro-og-canvas/dist/generateOpenGraphImage.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:path" imported from "node_modules/.pnpm/[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/astro-og-canvas/dist/generateOpenGraphImage.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:buffer" imported from "node_modules/.pnpm/[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/astro-og-canvas/dist/generateOpenGraphImage.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:crypto" imported from "node_modules/.pnpm/[email protected]/node_modules/deterministic-object-hash/dist/index.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:fs/promises" imported from "node_modules/.pnpm/[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/astro-og-canvas/dist/assetLoaders.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:module" imported from "node_modules/.pnpm/[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/astro-og-canvas/dist/assetLoaders.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:buffer" imported from "node_modules/.pnpm/[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/astro-og-canvas/dist/assetLoaders.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "fs" imported from "node_modules/.pnpm/[email protected]/node_modules/canvaskit-wasm/bin/full/canvaskit.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "path" imported from "node_modules/.pnpm/[email protected]/node_modules/canvaskit-wasm/bin/full/canvaskit.js". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "fs" imported from "fs?commonjs-external". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "path" imported from "path?commonjs-external". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:crypto" imported from "node:crypto?commonjs-external". Consider adding it to environments.ssr.external if it is intended.
20:46:26 [WARN] [vite] [plugin vite:resolve] Automatically externalized node built-in module "node:crypto" imported from "node_modules/.pnpm/[email protected]_@[email protected][email protected]_@[email protected][email protected][email protected]__/node_modules/starlight-theme-rapide/overrides/ThemeSelect.astro". Consider adding it to environments.ssr.external if it is intended.
The issue was fixed by removing the cloudflare adapter (Used for SSR). For the specific code that produces the issue, here is my repo's branch for it.
One weird thing: The new clean repo I created for issue reproduction. It has the cloudflare adapter and dependencies, but it builds without errors...
I can confirm @Taewan-P's bug report, and the solution of removing the @astrojs/cloudflare adapter.
After that, astro-og-canvas works very well. Thank you very much for making it!
Looks like it might be an upstream issue that causes the Cloudflare compatibility issues: canvaskit-wasm is importing native Node modules without the node: prefix ("fs" and "path" specifically). Cloudflare requires the node: prefix.
Given that, we probably can’t fix Cloudflare compatibility at this time — unless someone knows a workaround.