perpetuum7 Posts - Answer Overflow

perpetuum7

•Created by perpetuum7 on 8/26/2023 in #pages-help

vercel/og missing .wasm files

When using the vercel/og pages plugin I get this error:

    ✘ [ERROR] 2 error(s) and 0 warning(s) when compiling Worker.
20:36:18.056    
20:36:18.056    
20:36:18.059    
20:36:18.061    ✘ [ERROR] [plugin wrangler-module-collector] ENOENT: no such file or directory, open '/opt/buildhome/repo/node_modules/@vercel/og/dist/resvg.wasm?module'
20:36:18.061    
20:36:18.062        ../node_modules/@vercel/og/dist/index.edge.js:9:23:
20:36:18.062          9 │ import resvg_wasm from "./resvg.wasm?module";
20:36:18.062            ╵                        ~~~~~~~~~~~~~~~~~~~~~
20:36:18.062    
20:36:18.062      This error came from the "onResolve" callback registered here:
20:36:18.063    
20:36:18.063        ../../../pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124157:19:
20:36:18.063          124157 │             build5.onResolve(
20:36:18.063                 ╵                    ~~~~~~~~~
20:36:18.063    
20:36:18.063        at /opt/pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124157:20
20:36:18.063        at Array.forEach (<anonymous>)
20:36:18.063        at /opt/pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124156:22
20:36:18.064        at Array.forEach (<anonymous>)
20:36:18.064        at setup (/opt/pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124153:16)
20:36:18.064        at handlePlugins (/opt/pages/build_tool/js/node_modules/wrangler/node_modules/esbuild/lib/main.js:1276:21)
20:36:18.064        at buildOrServeImpl (/opt/pages/build_tool/js/node_modules/wrangler/node_modules/esbuild/lib/main.js:965:5)
20:36:18.064        at Object.buildOrServe (/opt/pages/build_tool/js/node_modules/wrangler/node_modules/esbuild/lib/main.js:773:5)
20:36:18.064        at /opt/pages/build_tool/js/node_modules/wrangler/node_modules/esbuild/lib/main.js:2112:17
20:36:18.064    
20:36:18.064    
20:36:18.064    ✘ [ERROR] [plugin wrangler-module-collector] ENOENT: no such file or directory, open '/opt/buildhome/repo/node_modules/@vercel/og/dist/yoga.wasm?module'
20:36:18.065    
20:36:18.065        ../node_modules/@vercel/og/dist/index.edge.js:10:22:
20:36:18.065          10 │ import yoga_wasm from "./yoga.wasm?module";
20:36:18.065             ╵                       ~~~~~~~~~~~~~~~~~~~~
20:36:18.065    
20:36:18.065      This error came from the "onResolve" callback registered here:
20:36:18.065    
20:36:18.065        ../../../pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124157:19:
20:36:18.066          124157 │             build5.onResolve(
20:36:18.066                 ╵                    ~~~~~~~~~
20:36:18.067    
20:36:18.067    
20:36:18.067    ✘ [ERROR] Build failed with 2 errors:
20:36:18.067    
20:36:18.067      ../node_modules/@vercel/og/dist/index.edge.js:9:23: ERROR: [plugin: wrangler-module-collector] ENOENT: no such file or directory, open '/opt/buildhome/repo/node_modules/@vercel/og/dist/resvg.wasm?module'
20:36:18.068      ../node_modules/@vercel/og/dist/index.edge.js:10:22: ERROR: [plugin: wrangler-module-collector] ENOENT: no such file or directory, open '/opt/buildhome/repo/node_modules/@vercel/og/dist/yoga.wasm?module'

    ✘ [ERROR] 2 error(s) and 0 warning(s) when compiling Worker.
20:36:18.056    
20:36:18.056    
20:36:18.059    
20:36:18.061    ✘ [ERROR] [plugin wrangler-module-collector] ENOENT: no such file or directory, open '/opt/buildhome/repo/node_modules/@vercel/og/dist/resvg.wasm?module'
20:36:18.061    
20:36:18.062        ../node_modules/@vercel/og/dist/index.edge.js:9:23:
20:36:18.062          9 │ import resvg_wasm from "./resvg.wasm?module";
20:36:18.062            ╵                        ~~~~~~~~~~~~~~~~~~~~~
20:36:18.062    
20:36:18.062      This error came from the "onResolve" callback registered here:
20:36:18.063    
20:36:18.063        ../../../pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124157:19:
20:36:18.063          124157 │             build5.onResolve(
20:36:18.063                 ╵                    ~~~~~~~~~
20:36:18.063    
20:36:18.063        at /opt/pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124157:20
20:36:18.063        at Array.forEach (<anonymous>)
20:36:18.063        at /opt/pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124156:22
20:36:18.064        at Array.forEach (<anonymous>)
20:36:18.064        at setup (/opt/pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124153:16)
20:36:18.064        at handlePlugins (/opt/pages/build_tool/js/node_modules/wrangler/node_modules/esbuild/lib/main.js:1276:21)
20:36:18.064        at buildOrServeImpl (/opt/pages/build_tool/js/node_modules/wrangler/node_modules/esbuild/lib/main.js:965:5)
20:36:18.064        at Object.buildOrServe (/opt/pages/build_tool/js/node_modules/wrangler/node_modules/esbuild/lib/main.js:773:5)
20:36:18.064        at /opt/pages/build_tool/js/node_modules/wrangler/node_modules/esbuild/lib/main.js:2112:17
20:36:18.064    
20:36:18.064    
20:36:18.064    ✘ [ERROR] [plugin wrangler-module-collector] ENOENT: no such file or directory, open '/opt/buildhome/repo/node_modules/@vercel/og/dist/yoga.wasm?module'
20:36:18.065    
20:36:18.065        ../node_modules/@vercel/og/dist/index.edge.js:10:22:
20:36:18.065          10 │ import yoga_wasm from "./yoga.wasm?module";
20:36:18.065             ╵                       ~~~~~~~~~~~~~~~~~~~~
20:36:18.065    
20:36:18.065      This error came from the "onResolve" callback registered here:
20:36:18.065    
20:36:18.065        ../../../pages/build_tool/js/node_modules/wrangler/wrangler-dist/cli.js:124157:19:
20:36:18.066          124157 │             build5.onResolve(
20:36:18.066                 ╵                    ~~~~~~~~~
20:36:18.067    
20:36:18.067    
20:36:18.067    ✘ [ERROR] Build failed with 2 errors:
20:36:18.067    
20:36:18.067      ../node_modules/@vercel/og/dist/index.edge.js:9:23: ERROR: [plugin: wrangler-module-collector] ENOENT: no such file or directory, open '/opt/buildhome/repo/node_modules/@vercel/og/dist/resvg.wasm?module'
20:36:18.068      ../node_modules/@vercel/og/dist/index.edge.js:10:22: ERROR: [plugin: wrangler-module-collector] ENOENT: no such file or directory, open '/opt/buildhome/repo/node_modules/@vercel/og/dist/yoga.wasm?module'

In the docs I saw no mention of having to do anything else other than installing the plugin. Am I missing something by chance?

6 replies

CDCloudflare Developers

•Created by perpetuum7 on 8/26/2023 in #pages-help

Custom font for vercel/og plugin

I'm trying to port a api route from NextJS on Vercel to a function on pages and it uses custom fonts with vercel/og. Will the same code that works in Next work on a function?

const jakartaExtraBoldFont = fetch(new URL('../../../public/fonts/embed/PlusJakartaSans-ExtraBold.ttf', import.meta.url)).then((res) =>
    res.arrayBuffer()
);
const jakartaMediumFont = fetch(new URL('../../../public/fonts/embed/PlusJakartaSans-Medium.ttf', import.meta.url)).then((res) => res.arrayBuffer());

const jakartaExtraBoldFont = fetch(new URL('../../../public/fonts/embed/PlusJakartaSans-ExtraBold.ttf', import.meta.url)).then((res) =>
    res.arrayBuffer()
);
const jakartaMediumFont = fetch(new URL('../../../public/fonts/embed/PlusJakartaSans-Medium.ttf', import.meta.url)).then((res) => res.arrayBuffer());

https://developers.cloudflare.com/pages/platform/functions/plugins/vercel-og/

2 replies

Gaming

Programming