[refractive] ImageData is not defined

[Profesor08]

Describe the bug

This error occurs because @hashintel/refractive relies on the browser's Canvas API (specifically the ImageData constructor), which does not exist in the Node.js environment where Next.js performs Server-Side Rendering (SSR).

The library is trying to calculate a displacement map or rounded square map during the initial server-side render, but ImageData is a Web API only available in actual browsers.

Runtime Error

ImageData is not defined

Call Stack
node_modules\@hashintel\refractive\src\maps\calculate-rounded-square-map.ts (74:21)
node_modules\@hashintel\refractive\src\maps\displacement-map.ts (72:10)
node_modules\@hashintel\refractive\src\components\filter.tsx (81:27)

hash/libs/@hashintel/refractive/src/maps/calculate-rounded-square-map.ts

Line 74 in b03f6fe

const imageData = new ImageData(width, height);

To reproduce

refractive-ssr-bug.zip

1. unzip
2. npm install
3. npm run dev
4. open in browser
5. see error in dev panel and in terminal

Expected behavior

No errors

Device

No response

Operating system

Windows 11

Browser

Chrome latest

Additional context

I think, computation of svg filter should happen on client side, inside useEffect. This will move all logic to client, and will not do any work on server side. Also, computations produce massive images (200kb+), and computing a few, on server side, will blow up html size.

[kube]

Thanks for the report!

Currently Refractive is not compatible with SSR, but that's one of our goals.

It was previously relying on canvas library to generate the images on the backend, but this was dropped as it is indeed not efficient at all to return these maps as Base64 in the HTML.

Current fix

We'll wrap this in a useEffect to make it compatible with SSR, even if the images will still need be computed on client-side at initialization.

Future SSR compat

We are still aiming at supporting SSR in the future, and one first step is this PR, that will actually make Refractive use only ONE polar map for all refraction effects.

It will still compute this image (once) at initialization, but we'll provide later a way to directly distribute it from the server.

[Profesor08]

Using only one polar map is a good solution because placing two images next to each other can result in a 1-pixel transparent line. This is how browsers work.