opennextjs / opennextjs-cloudflare

Open Next.js adapter for Cloudflare
https://opennext.js.org/cloudflare
MIT License
378 stars 8 forks source link

[BUG] Unable use @vercel/og with OpenNext #133

Open gregavola opened 4 days ago

gregavola commented 4 days ago

Describe the bug

When I try to add @vercel/og to the project, it compiles, but provides this as an error:

stack:

" [ERR_INVALID_ARG_TYPE]" argument must be of type string. Received undefined at validateString (node-internal:validators:101:15) at join (node-internal:internal_path:1004:13) at .worker-next/.next/standalone/node_modules/next/dist/compiled/@vercel/og/index.node.js (index.js:146973:54) at __init (index.js:12:59) at index.js:147033:52", name:

"TypeError", message:

"The "path" argument must be of type string. Received undefined",

I've also tried worker-og and I get:

⨯ ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

Import trace for requested module: ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/index.js ./app/api/avatar/[uuid]/route.tsx ⨯ ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

Even if I try to webAssembly:

const nextConfig = {
  webpack: (config) => {
    config.experiments = {
      asyncWebAssembly: true,
      syncWebAssembly: true,
      layers: true,
    };
    return config;
  },
};

I get: Attempted import error: './resvg-LFIOYO65.wasm' does not contain a default export (imported as 'fy').

Steps to reproduce

  1. Render an ImageResponse on the page browser

Expected behavior

I would expect the image to render on the apge.

@opennextjs/cloudflare version

0.2.1

Node.js version

18.x

Wrangler version

3.80

next info output

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Wed Jul 31 20:49:39 PDT 2024; root:xnu-10063.141.1.700.5~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.22
  pnpm: 8.11.0
Relevant Packages:
  next: 14.2.14 // An outdated version detected (latest is 15.0.3), upgrade is highly recommended!
  eslint-config-next: 14.2.14
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2

Additional context

No response