Does not work on cloudflare pages

[buhodev]

Describe the bug
Everything works on local but doesn't work on cloudflare pages

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/buhodev/melt-ui-starter/
2. Deploy on cloudflare (e.g. [my-new-project].pages.dev)
3. Go to [my-new-project].pages.dev/en/og
4. See error 500 Internal error.

To see the logs on cloudflare dashboard:

1. Go to cloudflare dashboard
2. Click on Workers & Pages on the left sidebar

3. Click on View details on the bottom right of your project card

4. Click on Functions tab and scroll down
5. Click on Begin logs stream button and wait until the Websocket connection is established.

7. Go to [my-new-project].pages.dev/en/og again to trigger the function.
8. Click on the last GET log

10. See the error trace:

{
  "outcome": "ok",
  "scriptName": "pages-worker--1264517-production",
  "diagnosticsChannelEvents": [],
  "exceptions": [],
  "logs": [
    {
      "message": [
        "CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder"
      ],
      "level": "log",
      "timestamp": 1690291911201
    },
    {
      "message": [
        "Error: WASM has not been initialized. Call `initialize` function."
      ],
      "level": "error",
      "timestamp": 1690291911201
    }
  ],
  ...
}

Expected behavior
The /og route should generate the image

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome

Additional context
Add any other context about the problem here.

[theetherGit]

ok got the i'll test on your deployment

[buhodev]

Thanks. Let me know if you need anything from my end

[theetherGit]

Sure. I found the issue but i have to look what i can do. As of now it looks like #19 may be the reason. As cf has limited cpu time for every request. I have to go more deep for that.

[corysimmons]

Was this ever fixed or does sveltekit-og still not work on Cloudflare Pages? 😟

[theetherGit]

Still trying to get it work on workers.

[theetherGit]

It's not going to work on cloudflare workers. I have tried so many times, I'm unable to make it work on edge runtime.

[buhodev]

Thanks @theetherGit. I tried also to make it work with @resvg/resvg-js + satori + satori-html but only at build time (not useful since it's not dynamic).

[corysimmons]

I got it working in CF Workers with just satori-html and workers-og.

import { Response as TResponse, Request } from "@cloudflare/workers-types";
import { ImageResponse } from "workers-og";
import { html as satoriHtml } from "satori-html";

// React stuff
import * as React from "react";
import { renderToString } from "react-dom/server";

export default {
  async fetch(request: Request, env: Env): Promise<TResponse> {
    // const html = I generate HTML from a React component + React.renderToString

    const imageResponse = new ImageResponse(
      satoriHtml(html) as React.ReactNode,
      {
        width: 1200,
        height: 630,
        fonts: [{ name: "TT Hoves Pro", data: fontData, weight: 600 }],
      }
    );

    // Put the file in a CF bucket and respond with a URL.
  },
};

[theetherGit]

You are making a direct use of workers-og. Please try to use with sveltekit and then build it.

Between you can use @ethercorps/svelte-h2j which can convert svelte to jsx, it can be used standalone but you will need svelte as dependency.