Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
aa-ndrej opened this issue May 14, 2024 · 0 comments
Labels
bug Something that isn't working

Comments

@aa-ndrej
Copy link

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 aa-ndrej added the bug Something that isn't working label May 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something that isn't working
Projects
Status: Untriaged
Development

No branches or pull requests

1 participant