Cloudflare Developers•2mo ago

Unable to run async logic in page function?

Right now I'm trying to add image generation middleware to my SPA via "@cloudflare/pages-plugin-vercel-og", but it seems I can't run any async logic in the plugin, which is an issue since the font used needs to be fetched. Right now, this works:

export const onRequest = vercelOGPagesPlugin<Props>({
    imagePathSuffix: "/social-image.png",
    options: {
        emoji: "twemoji",
    },
    component: ({ ogTitle, pathname }) => {
        return <div
        style={{
          // ...

export const onRequest = vercelOGPagesPlugin<Props>({
    imagePathSuffix: "/social-image.png",
    options: {
        emoji: "twemoji",
    },
    component: ({ ogTitle, pathname }) => {
        return <div
        style={{
          // ...

But this fails:

// also fails with
// export const onRequest = async () => vercelOGPagesPlugin<Props>({
export const onRequest = vercelOGPagesPlugin<Props>({
    imagePathSuffix: "/social-image.png",
    options: {
        emoji: "twemoji",
        fonts: [{
            data: await fetch("https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2").then(res => res.arrayBuffer()),
            style: 'normal'
        }]
    },
    component: ({ ogTitle, pathname }) => {
        return <div
        style={{
          // ...

// also fails with
// export const onRequest = async () => vercelOGPagesPlugin<Props>({
export const onRequest = vercelOGPagesPlugin<Props>({
    imagePathSuffix: "/social-image.png",
    options: {
        emoji: "twemoji",
        fonts: [{
            data: await fetch("https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2").then(res => res.arrayBuffer()),
            style: 'normal'
        }]
    },
    component: ({ ogTitle, pathname }) => {
        return <div
        style={{
          // ...

4 Replies

KainoaOP•2mo ago

Even though this server is practically dead, I figured it out. Here's the solution if anyone searches for this:

import React from "react";
import { ImageResponse } from "workers-og"; // maintained library

export const onRequest: PagesFunction = async ({
    request,
    next,
    env,
    waitUntil,
}) => {
    const url = new URL(request.url);

    // await whatever logic

        function component({ apiData }: { apiData: Market }) {
            return (
                <div> //...
        )};

        return new ImageResponse(component({ apiData }), {
            emoji: "twemoji",
            
        });

import React from "react";
import { ImageResponse } from "workers-og"; // maintained library

export const onRequest: PagesFunction = async ({
    request,
    next,
    env,
    waitUntil,
}) => {
    const url = new URL(request.url);

    // await whatever logic

        function component({ apiData }: { apiData: Market }) {
            return (
                <div> //...
        )};

        return new ImageResponse(component({ apiData }), {
            emoji: "twemoji",
            
        });

Athestar•3w ago

Interesting, could you take this one? https://discord.com/channels/595317990191398933/910978223968518144/1314646385387245640

KainoaOP•3w ago

You're gonna have to find someone else or figure it out yourself, I don't use Remix, and this was only because of a specific plugin from what I can tell.

Athestar•3w ago

I want to figure out myself with any help

Gaming

Programming

Unable to run async logic in page function?