🐛 BUG: `wrangler pages dev` not working with astro `<Image />` component in `hybrid` output mode
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:
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:
---
import Layout from '../layouts/Layout.astro'
import { Image } from 'astro:assets'
---
<Layout title="Welcome to Astro.">
<main>
<Image
src={import('../assets/image.jpg')}
widths={[250, 500]}
sizes="250px"
alt=""
style="width: 250px; height: auto"
/>
</main>
</Layout>
- 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.
Running into the same problem - was able to workaround by moving the built (e.g. with astro, ./dist/*) directory subtree into a separate parent directory that doesn't include package.json or node_modules. It appears that even though wrangler is being told to just serve the contents of DIRECTORY it still looks into the parents and complains/fails about things it finds in node_modules that are incompatible with the CF runtime.
Hopefully relevant: https://github.com/withastro/astro/issues/13174 https://github.com/withastro/adapters/pull/335