Support for server components

[kachkaev]

👋 @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!

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/[email protected][email protected]/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/[email protected][email protected]/node_modules/qrcode.react/lib/esm/index.js
./app/test/route.tsx

./node_modules/.pnpm/[email protected][email protected]/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:

qrcode.react/src/index.tsx

Line 7 in df6d610

import React, {useRef, useEffect, useState, useCallback, useMemo} from 'react';

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.

[zpao]

Nothing against it at all. IIRC the issue with splitting is that it requires restructuring the actual encoder to work with our current toolchain.

This line imports hooks that are not available on the server

I don't see any actual documentation on what can or cannot be imported in server components. I can start a next project and go through trial and error, but that's not ideal.

[kachkaev]

Cool!

I don't see any actual documentation on what can or cannot be imported in server components.

I believe that it applies to anything that’s stateful. E.g. useEffect, useState, useCallback, etc.

#188 is a step in the right direction, it’s just missing "use client" in canvas.tsx. We can push the suggestion to @caub’s PR or I can create a new PR from scratch if that’s easier. What would you prefer?

[kachkaev]

Ping @zpao 👋
Happy to create a PR if you’d prefer that over #188

[zpao]

The other PR is going to need to be updated a bunch anyway so feel free to make a new one. Like I said though, splitting the components is easy enough. The tooling right now blows up generating the TS declaration once you split and that's the bigger effort.

[kachkaev]

Looks like we can get away with something even simpler: #352. Typescript tooling and file splitting can be done later (much later TBH).