Vite Bundle Error for new Astro Actions in Astro v4.8 (cannot bundle node:async_hooks) #11005
Assignees
Labels
- P2: has workaround
Bug, but has workaround (priority)
Comments
|
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? |
bholmesdev
added
- P2: has workaround
|
@bholmesdev 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? 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. |
|
Ah yep, looks like we missed one more step: you'll need to mark the node dependency as "external" in your astro config. The Let me know if that resolves the issue! |
|
@bholmesdev |
chiubaca
added a commit
to chiubaca/fullstack-astro-cloudflare
that referenced
this issue
May 12, 2024
|
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: heres my repo : https://github.com/chiubaca/fullstack-astro-cloudflare |
|
Hey @chiubaca! Sorry to hear that. Taking a peak at the source code, it looks like your compatibility_flags = [ "nodejs_compat" ]Have you tried setting this? |
|
Thanks for the response @bholmesdev . The issues was indeed my wrangler.toml. These settings are have fixed the issue for me |
|
Hey @bholmesdev, I came here from your Astro Actions YouTube video, I tried to mimic it, but I'm getting error in ✘ [ERROR] service core:user:blog: Uncaught ReferenceError: MessageChannel is not defined
at null.<anonymous> (tqx49h9p2ob.js:11320:5) in
.wrangler/tmp/pages-A87Vez/chunks/_@astro-renderers_CCtvfKAP.mjs
at null.<anonymous> (tqx49h9p2ob.js:4:56) in __init
at null.<anonymous> (tqx49h9p2ob.js:16323:1)
✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.I tried doing everything told above -- name = "blog"
compatibility_date = "2024-07-12"
pages_build_output_dir = "./dist"
compatibility_flags = ["nodejs_compat"] |
|
Hey @bhargawananbhuyan! Got it. Workers can be finicky. It looks like that error is coming from an Astro renderer rather than actions, but I can't be sure. Did you also try adding |
|
Hey @bholmesdev, I followed these instructions which fixed the first error but now I am running into a different error: |
|
@clayton-schneider Got it. Did you also apply the NoeJS compat flag as noted here? Seems like it's easy to see my comment on the first bit, and miss my comment on the second 😅 My mistake! For anyone that finds this issue, it can be resolved in two steps:
|
In https://dash.cloudflare.com/ go to Workers & Pages > click in Worker > TAP Settings
|
|
@bholmesdev we run into the same error, but with the Netlify adapter. Netlify functions run in a node environment, right? Any suggestions? |
|
@wireless25 oh hm, yes they should run in a node environment. Are you using Netlify edge functions maybe? Paste the error log here if there's anything unique we can use. |
|
thx for your fast reply @bholmesdev Following the relevant error log from the Netlify build. The issue appeared when we started using server actions. 4:24:24 PM: apps/www build: ✘ [ERROR] Could not resolve "node:async_hooks"
4:24:24 PM: apps/www build: .netlify/functions-internal/ssr/chunks/shared_CVtVv-q0.mjs:1:34:
4:24:24 PM: apps/www build: 1 │ import { AsyncLocalStorage } from 'node:async_hooks';
4:24:24 PM: apps/www build: ╵ ~~~~~~~~~~~~~~~~~~
4:24:24 PM: apps/www build: The package "node:async_hooks" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
apps/www build: Could not resolve "node:async_hooks"
4:24:24 PM: apps/www build: Stack trace:
4:24:24 PM: apps/www build: at failureErrorWithLog (/opt/build/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1651:15)
4:24:24 PM: apps/www build: at /opt/build/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1004:52
4:24:24 PM: apps/www build: at /opt/build/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1086:16
4:24:24 PM: apps/www build: at handleIncomingPacket (/opt/build/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:764:9)
4:24:24 PM: apps/www build: at Socket.emit (node:events:519:28)
4:24:24 PM: apps/www build: Failed
4:24:24 PM: /opt/build/repo/apps/www:
4:24:24 PM: ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL @sozialinfo/[email protected] build: `astro build`
4:24:24 PM: Exit status 1Now as you say it, we do use the "edgeMiddleware" feature of the Netlify adapter. Could it be conflicting with server actions? export default defineConfig({
// ...
adapter: netlify({
cacheOnDemandPages: false,
edgeMiddleware: true,
}),
// ...
}) |
|
@wireless25 ah ha, that could be the issue as well. Actions use middleware to handle result data, and I bet Netlify does not use Node by default. The runtime error seems to recommend using |
|
Ok, when middleware is used for actions, it could be the problem. I disabled // astro.config.ts
export default defineConfig({
// ...
adapter: netlify({
edgeMiddleware: false,
}),
// ...
})The build went through now. So it has something to do with the Edge functions as middleware. I can not understand that though, in the docs they clearly point out, that node internals can be imported directly by using the For now, this workaround is fine, maybe it would help to have a hint in the Astro docs or the adapter docs? |
|
@wireless25 Ah ha, digging deeper on that error log, it sounds like our esbuild bundler is raising the issue. I see we're setting |
|
Actually, I've spoken too soon. The project does build now, but it will fail in production if you attempt to use a server fallback for actions. The reason is a bit complicated: we use async local storage to keep track of an action result. If you deploy middleware to the edge, it will live in a different context from the page itself. So we can no longer pass that result to your page. We'd need to rearchitect how Actions work to support edge middleware. I'm not certain what that would look like. But for now, I would recommend disabling the edge middleware option. Is there a reason this could be a problem for your application? |
|
Update: fix is in PR! We've removed async local storage from the pipeline, and we've serialized action results to travel over-the-wire from edge middleware to your application. You can track the fix here |
|
@bholmesdev thank you so much for digging deeper into this and already working on the solution. Just found #11602 which will bring these fixes to Astro. Is there any plan for when this will be released? |
|
@wireless25 Thanks for the reminder! We just merged the latest patches. Expect these to land in the next hour or so. |
|
still error. my repo url already addon: setting function with: nodejs_compat |
|
Hey @innocces! Hm, we no longer require the |
here is same problem!!! the resolve you provide is add |
I found the reason. It's because I'm using react@beta, version 19. The astro-renderer packaged in the worker contains part of the MessageChannel code that the client can only execute. When I switched to version 18, everything went back to normal. email-reciever/website@703de4b#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519 |
|
I a facing similar issue here. https://github.com/kunjee17/anala . I have added firebase admin and it just don't compile with |
|
Hey @kunjee17! Sorry you're hitting issues with edge functions. I know Netlify uses the Deno runtime for that, which isn't always Node compliant. Mind sharing the error you see at runtime? |
|
@bholmesdev thanks for reply. Here is error message |
|
@kunjee17 Oh boy, definitely looks like a mismatch between Firebase and Netlify's edge environment. I know that It looks like firebase has a |
|
@bholmesdev hey, thanks for reply. Simple Serverless API works like charm. It is just edge functions are giving issues. Otherwise Astro + Netlify + Firebase works without any issues. |
|
For all those who ended up here searching for |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Astro Info
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_hooksmodule which is used in a file (store.js) by the new "Astro Actions" feature.I'm using
pnpmand this is the file that uses it :-node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/actions/runtime/store.jsWhat's the expected result?
Expected result will be that
pnpm buildbuilds the project successfully.There were 0 errors with
astro check, but the build still fails becasuse vite cannot bundle thisnode:async_hooksmodule.Link to Minimal Reproducible Example
https://github.com/rhymbit/astro-actions-bundle-bug
Participation
The text was updated successfully, but these errors were encountered: