cloudflare / cloudflare/workers-sdk

🐛 BUG: `wrangler pages dev` not working with astro `<Image />` component in `hybrid` output mode

Open
#5,824 2 comments 2 reactions 3 assignees Claimed by @stritt View on GitHub
package:c3 product:pages
Dominant language
TypeScript
Stars
4.5k
Forks
1.5k
Avg merge
3d 8h
Merged PRs (30d)
187

Description

### Which Cloudflare product(s) does this pertain to?

Pages, Wrangler core

### What version(s) of the tool(s) are you using?

3.55.0 [wrangler], 4.8.3 [astro], 10.2.6 [@astrojs/cloudflare]

### What version of Node are you using?

20.11.1

### What operating system and version are you using?

macOS Sonoma 14.2.1

### Describe the Bug

### Steps to reproduce
- Run `npm create cloudflare@latest cloudflare-astro -- --framework=astro`.
- `astro.config.mjs`:
~~~js
import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";

// https://astro.build/config
export default defineConfig({
output: "hybrid",
adapter: cloudflare({
imageService: "compile",
platformProxy: {
enabled: true
}
})
});
~~~
- `src/pages/index.astro`:
~~~astro
---
import Layout from '../layouts/Layout.astro'

import { Image } from 'astro:assets'
---



~~~
- Add an image `src/assets/image.jpg`.
- Run `npm preview`.

This should build the project and then execute `wrangler pages dev`.

### Expected behavior
There should be no errors, as everything works as expected when deploying to Cloudflare Pages.

### Observed behavior
`wrangler pages dev` fails with the errors below.

`node_modules/detect-libc` is a dependency of the `sharp` library to optimize the images on build. With `output: "hybrid"` and `imageService: "compile"` the images are only optimaized for the static pages at build time and the `sharp` library is never used in SSR.

### Please provide a link to a minimal reproduction

_No response_

### Please provide any relevant error logs

✘ [ERROR] Could not resolve "child_process"

node_modules/detect-libc/lib/detect-libc.js:6:29:
6 │ const childProcess = require('child_process');
╵ ~~~~~~~~~~~~~~~

The package "child_process" wasn't found on the file system but is built into node.
Add "node_compat = true" to your wrangler.toml file and make sure to prefix the module name with "node:" to enable Node.js compatibility.

✘ [ERROR] Could not resolve "fs"

node_modules/detect-libc/lib/filesystem.js:6:19:
6 │ const fs = require('fs');
╵ ~~~~

The package "fs" wasn't found on the file system but is built into node.
Add "node_compat = true" to your wrangler.toml file and make sure to prefix the module name with "node:" to enable Node.js compatibility.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.