workers-sdk icon indicating copy to clipboard operation
workers-sdk copied to clipboard

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

Open aa-ndrej opened this issue 1 year ago • 2 comments

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.

aa-ndrej avatar May 14 '24 15:05 aa-ndrej

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.

kaytwo avatar Jul 03 '24 18:07 kaytwo

Hopefully relevant: https://github.com/withastro/astro/issues/13174 https://github.com/withastro/adapters/pull/335

jldec avatar Aug 23 '24 12:08 jldec