Kainoa Posts - Answer Overflow

Kainoa

•Created by Kainoa on 10/25/2024 in #pages-help

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={{
          // ...

2 replies

Gaming

Programming