Vite Bundle Error for new Astro Actions in Astro v4.8 (cannot bundle node:async_hooks)

[rhymbit]

Astro Info

Astro                    v4.8.2
Node                     v20.11.1
System                   Linux (x64)
Package Manager          pnpm
Output                   hybrid
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I created a astro starter project repo that shows this problem. Please checkout the README, also clone and try to build the project.
https://github.com/rhymbit/astro-actions-bundle-bug

Vite is unable to bundle node:async_hooks module which is used in a file (store.js) by the new "Astro Actions" feature.
I'm using pnpm and this is the file that uses it :-
node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/actions/runtime/store.js

What's the expected result?

Expected result will be that pnpm build builds the project successfully.
There were 0 errors with astro check, but the build still fails becasuse vite cannot bundle this node:async_hooks module.

Link to Minimal Reproducible Example

https://github.com/rhymbit/astro-actions-bundle-bug

Participation

• I am willing to submit a pull request for this issue.

[bholmesdev]

Hey @rhymbit! I see you're using the Cloudflare adapter here. You'll need to add the nodejs_compat compatibility flag to use actions. We use the 'async local storage' feature to help you access API context (headers, cookies, etc) from your actions. Is this possible, or will this have drawbacks for you?

[rhymbit]

@bholmesdev
I added the wrangler.toml file in the root of my project and also updated the astro.config.mjs to include it :-

  adapter: cloudflare({
    platformProxy: {
      enabled: true,
      configPath: "wrangler.toml",
    },
  }),

I've also pushed these changes to the project's repository so you can check them out.

But it still fails to build with the exact same error.

Is it not possible for me to build this project locally on my PC, and will it only build inside the Cloudflare dashboard?
I haven't tested this for my original project, because I'm not using Cloudflare's CI-CD, and rather I'm building the project locally and uploading assets using wrangler-cli. But since it doesn't even finish building, unfortunately I can't upload anything 🤷🏻‍♂️.

Please let me know if there's any other way to build a project locally that uses Actions in it, but for now I suppose I'll just simply use endpoints.

[bholmesdev]

Ah yep, looks like we missed one more step: you'll need to mark the node dependency as "external" in your astro config. The @astrojs/cloudflare docs point out how to do this: https://docs.astro.build/en/guides/integrations-guide/cloudflare/#nodejs-compatibility

Let me know if that resolves the issue!

[rhymbit]

@bholmesdev
Yup, now it works perfectly without any problems.
Thanks a lot for your help ❤️
I've pushed the working code to the repo and I also updated the README with fix details.
(Fixed) -> https://github.com/rhymbit/astro-actions-bundle-bug

[chiubaca]

I'm running into the same issue. I've tried copying @rhymbit astro config and wrangler.toml files like-for-like but I keep getting build errors on cloudflare:

05:15:53.449 | Error: Failed to publish your Function. Got error: Uncaught Error: No such module "node:async_hooks".   imported from "renderers.mjs"

heres my repo : https://github.com/chiubaca/fullstack-astro-cloudflare

[bholmesdev]

Hey @chiubaca! Sorry to hear that. Taking a peak at the source code, it looks like your astro.config.mjs is configured correctly, but you're missing the nodejs_compat flag in your wrangler.toml:

compatibility_flags = [ "nodejs_compat" ]

Have you tried setting this?

[chiubaca]

Thanks for the response @bholmesdev . The issues was indeed my wrangler.toml.

These settings are have fixed the issue for me

name = "fullstack-astro-cloudflare"
compatibility_flags = ["nodejs_als"]
compatibility_date = "2024-05-12"
pages_build_output_dir = "dist"