Skip to content

Cloudflare-pages adapter doesn't support { read } from '$app/server'; #13254

@mitchell28

Description

@mitchell28

Describe the bug

Get error message (Error: Cannot use read from $app/server in /og.png when using @sveltejs/adapter-cloudflare. Please ensure that your adapter is up to date and supports this feature) when building for cloudflare-pages adapter though it says it supports all sveltekit features in the docs,

Reproduction

import type { RequestHandler } from '@sveltejs/kit';
import { error } from '@sveltejs/kit';

import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
import { html as toReactNode } from 'satori-html';
import { render } from 'svelte/server';

import OgCard from './OgCard.svelte';

import NotoSans from './NotoSans-Regular.ttf';
import { read } from '$app/server';

const fontData = read(NotoSans).arrayBuffer();

const width = 1200;
const height = 648;

const generateOgImage = async (message: string) => {
	const { body } = render(OgCard, { props: { message } });
	const element = toReactNode(`${body}<style>
	div {
		font-family: 'Noto Sans';
		display: flex;
		flex-direction: column;
		font-size: 50px;
		background-color: white;
		height: 100%;
		width: 100%;
		align-items: center;
		justify-content: center;
	}
</style>`);

	const svg = await satori(element, {
		fonts: [
			{
				name: 'Noto Sans',
				data: await fontData,
				style: 'normal'
			}
		],
		height,
		width
	});

	const resvg = new Resvg(svg, {
		fitTo: {
			mode: 'width',
			value: width
		}
	});

	return resvg.render().asPng();
};

export const GET: RequestHandler = async ({ url }) => {
	try {
		const message = url.searchParams.get('message');

		if (!message) {
			throw error(400, 'Missing required parameters');
		}

		const imageBuffer = await generateOgImage(message);

		return new Response(imageBuffer, {
			headers: {
				'content-type': 'image/png',
				'cache-control': 'public, max-age=604800, immutable'
			}
		});
	} catch (e) {
		console.error('Error generating OG image:', e);
		throw error(500, 'Failed to generate image');
	}
};


### Logs

```Shell
vite v6.0.6 building SSR bundle for production...
✓ 5735 modules transformed.

node:internal/event_target:1101
  process.nextTick(() => { throw err; });
                           ^
Error: Cannot use `read` from `$app/server` in /og.png when using @sveltejs/adapter-cloudflare. Please ensure that your adapter is up to date and supports this feature.
    at check_feature (file:///path/to/project/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@types+node@_qesdia25kriwukttr6lzpklpsa/node_modules/@sveltejs/kit/src/utils/features.js:18:11)
    at analyse (file:///path/to/project/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@types+node@_qesdia25kriwukttr6lzpklpsa/node_modules/@sveltejs/kit/src/core/postbuild/analyse.js:130:5)
    at async MessagePort.<anonymous> (file:///path/to/project/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@types+node@_qesdia25kriwukttr6lzpklpsa/node_modules/@sveltejs/kit/src/utils/fork.js:23:16)

Node.js v23.3.0

System Info

System:
    OS: macOS 15.2
    CPU: (11) arm64 Apple M3 Pro
    Memory: 759.97 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.3.0 - /opt/homebrew/bin/node
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: 9.12.3 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 18.2
  npmPackages:
    @fontsource-variable/inter: ^5.1.1 => 5.1.1 
    @resvg/resvg-js: ^2.6.2 => 2.6.2 
    @sveltejs/adapter-auto: ^3.3.1 => 3.3.1 
    @sveltejs/adapter-cloudflare: ^4.9.0 => 4.9.0 
    @sveltejs/enhanced-img: ^0.4.4 => 0.4.4 
    @sveltejs/kit: ^2.15.1 => 2.15.1 
    @sveltejs/vite-plugin-svelte: ^5.0.3 => 5.0.3 
    @tailwindcss/typography: ^0.5.15 => 0.5.15 
    @types/node: ^22.10.2 => 22.10.2 
    @unpic/svelte: ^0.0.56 => 0.0.56 
    autoprefixer: ^10.4.20 => 10.4.20 
    bits-ui: 1.0.0-next.64 => 1.0.0-next.64 
    clsx: ^2.1.1 => 2.1.1 
    formsnap: 2.0.0-next.1 => 2.0.0-next.1 
    lucide-svelte: ^0.464.0 => 0.464.0 
    mode-watcher: ^0.5.0 => 0.5.0 
    prettier: ^3.4.2 => 3.4.2 
    prettier-plugin-svelte: ^3.3.2 => 3.3.2 
    prettier-plugin-tailwindcss: ^0.6.9 => 0.6.9 
    satori: ^0.12.0 => 0.12.0 
    satori-html: ^0.3.2 => 0.3.2 
    super-sitemap: ^1.0.3 => 1.0.3 
    svelte: ^5.16.0 => 5.16.0 
    svelte-check: ^4.1.1 => 4.1.1 
    svelte-inview: ^4.0.4 => 4.0.4 
    svelte-meta-tags: ^4.0.4 => 4.0.4 
    svelte-sonner: ^0.3.28 => 0.3.28 
    sveltekit-superforms: ^2.22.1 => 2.22.1 
    tailwind-merge: ^2.6.0 => 2.6.0 
    tailwind-variants: ^0.3.0 => 0.3.0 
    tailwindcss: ^3.4.17 => 3.4.17 
    tailwindcss-animate: ^1.0.7 => 1.0.7 
    typescript: ^5.7.2 => 5.7.2 
    vite: ^6.0.6 => 6.0.6 
    zod: ^3.24.1 => 3.24.1

Severity

annoyance

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions