👋 @zpao! Just curious if you have any plans to support server components. I am experimenting with og images in Next.js (vercel/satori), writing something like this:

import { ImageResponse } from "next/og";
import { QRCodeSVG } from "qrcode.react";

export function GET(): Response {
  return new ImageResponse(
    (
      <div tw="flex w-full h-full items-center justify-center bg-[#cfc]">
        <QRCodeSVG
          value="https://example.com"
          width={100}
          height={100}
          includeMargin={true}
        />
      </div>
    ),
    {
      width: 200,
      height: 200,
    },
  );
}

This code works! – UPD: not quite, see #347 (comment)

However, there are warnings during next dev, next build and next start If I add export const runtime = "edge"; to the file:

 ⚠ ./node_modules/.pnpm/qrcode.react@3.1.0_react@18.3.1/node_modules/qrcode.react/lib/esm/index.js
Attempted import error: 'useRef' is not exported from 'react' (imported as 'useRef').

Import trace for requested module:
./node_modules/.pnpm/qrcode.react@3.1.0_react@18.3.1/node_modules/qrcode.react/lib/esm/index.js
./app/test/route.tsx

./node_modules/.pnpm/qrcode.react@3.1.0_react@18.3.1/node_modules/qrcode.react/lib/esm/index.js
Attempted import error: 'useEffect' is not exported from 'react' (imported as 'useEffect').

...

Regardless of Next.js intricacies, it seems that qrcode.react lacks React server component support. This line imports hooks that are not available on the server:

What do you think about splitting canvas and svg implementations into two files? If we import an SVG, it can be server-rendered. If it’s a canvas, there is "use client" on top. I reckon that both QRCodeCanvas and QRCodeSVG can be still re-exported from src/index.tsx, so the change is non-breaking.