Usage with Remix?

[nicholaschiang]

Has anyone been able to successfully get this to work with Remix?

Ideally, I want to have the same developer experience as Next.js, where all I have to do is use @vercel/og and then deploy my Remix project to Vercel (via @vercel/remix) with the @vercel/og usage defined in a loader function.

I've been running into issues with the development server:

TypeError: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:399:5)
    at validateString (node:internal/validators:163:11)
    at join (node:path:1172:7)
    at Object.<anonymous> (/Users/nchiang/repos/site/node_modules/.pnpm/@[email protected]/node_modules/@vercel/og/src/index.node.ts:19:17)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)

Here's my usage:

// app/routes/og.tsx

import { ImageResponse } from '@vercel/og'

export const config = { runtime: 'edge' }

export function loader() {
  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          gap: 12,
          justifyContent: 'center',
          backgroundColor: '#000',
          color: '#fff',
          fontSize: 32,
          fontWeight: 400,
        }}
      >
        <img
          alt=''
          src='https://nicholas.engineering/favicon.png'
          width={50}
          height={50}
        />
        <div>nicholas.engineering</div>
      </div>
    ),
    {
      width: 800,
      height: 400,
    },
  )
}

Here's my Remix configuration:

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  future: {
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_dev: true,
  },
  cacheDirectory: './node_modules/.cache/remix',
  ignoredRouteFiles: ['**/.*', '**/*.css', '**/*.test.{js,jsx,ts,tsx}'],
  serverModuleFormat: 'cjs',
  serverDependenciesToBundle: [
    'nanoid/non-secure',
    '@vercel/og',
    'satori',
    'yoga-wasm-web',
  ],
}

Related: remix-run/remix#4735 (not the same issue though... similar)

[TooTallNate]

It worked for me, after removing the default 😉

Note that I didn't need to specify any of those serverDependenciesToBundle.

(Unrelated) It looks like that images configuration is related to Vercel's Image Optimization. This is not doing anything within the Remix config. If you would like to use Image Optimization, then you can move that "images" field to your vercel.json file (then the /_vercel/image endpoint will be available within your deployment).

[TooTallNate]

Here ya go: https://github.com/TooTallNate/remix-og

Example Deployment: https://remix-og.vercel.app/og

[nicholaschiang]

does the dev script for that repository work for you @TooTallNate?

it seems to be failing for me:

/Users/nchiang/repos/remix-og/build/index.js:330
var import_og = require("@vercel/og"), import_jsx_dev_runtime5 = require("react/jsx-dev-runtime"), config2 = { runtime: "edge" };
                ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/nchiang/repos/remix-og/node_modules/.pnpm/@[email protected]/node_modules/@vercel/og/dist/index.node.js from /Users/nchiang/repos/remix-og/build/index.js not supported.
Instead change the require of index.node.js in /Users/nchiang/repos/remix-og/build/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/nchiang/repos/remix-og/build/index.js:330:17)
    at Object.<anonymous> (/Users/nchiang/repos/remix-og/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/serve/dist/cli.js:34:13)

[TooTallNate]

The export const config = { runtime: 'edge' } syntax is a Vercel-specific feature, so Remix's default dev server does not properly emulate that environment.

Indeed, I can see how that would be frustrating while trying to fine-tune your OG image. We have plans to introduce a Vercel-flavored Remix dev command, but it hasn't happened as of yet.

Might be easiest for now to do the fine-tuning within the OG Image Playground, and copy/paste the final component into your Remix app once it's ready.

[nicholaschiang]

gotcha. my problem is that my dev command doesn't even work when i have a @vercel/og import anywhere in the app.

it would be fine if that specific route was broken locally, but i can't have my entire remix dev command broken due to one route.

one possible solution is to simply replace that import with something like @m5r/og during development and then replace it when deploying to vercel (e.g. like how i'm replacing prisma/client with prisma/client/edge when deploying). but that's not the best solution... wondering if there's anything we can fix here first.

[JClackett]

Literally trying to do the exact same thing as @nicholaschiang, I have something working using satori and resvg-js:

import satori from "satori"
import { Resvg } from "@resvg/resvg-js"
import { cacheHeader } from "pretty-cache-header"
import type { LoaderArgs } from "@vercel/remix"
import { z } from "zod"
import queryString from "query-string"

export const loader = async ({ request }: LoaderArgs) => {
  const schema = z.object({
    title: z.string(),
    image: z.string().url(),
  })
  const result = schema.safeParse(queryString.parse(new URL(request.url).search))
  if (!result.success) return new Response(null, { status: 404 })

  const { title, image } = result.data

  // convert html to svg
  const svg = await satori(
    <div tw="flex bg-black h-full w-full">
      <img alt="cover" tw="w-full h-full object-cover" src={image} />
      <h1 tw="text-white">{title}</h1>
    </div>,
    {
      width: 600,
      height: 400,

      fonts: [
        {
          name: "Poppins",
          data: await fetch("https://github.com/google/fonts/raw/main/ofl/poppins/Poppins-Regular.ttf").then((res) =>
            res.arrayBuffer(),
          ),
          weight: 400,
          style: "normal",
        },
      ],
    },
  )

  // render png
  const resvg = new Resvg(svg, { background: "white" })
  const pngData = resvg.render()
  const pngBuffer = pngData.asPng()

  return new Response(pngBuffer, {
    headers: {
      "Cache-Control": cacheHeader({
        public: true,
        maxAge: "1year",
        sMaxage: "1year",
        staleWhileRevalidate: "1day",
        staleIfError: "1day",
      }),
    },
  })
}