<Code> component Fail to Build after Upgrading to Astro v4 and Cloudflare Adapter v8.0.0

[Kynson]

Astro Info

Astro                    v4.0.6
Node                     v20.9.0
System                   macOS (x64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/cloudflare
Integrations             @sanity/astro

Describe the Bug

Build fails at the stage "finalizing server assets" with the following error if I use the <Code> build-in component from astro:components

> [email protected] build
> astro build

07:28:52 [build] output: "server"
07:28:52 [build] directory: /workspaces/workspace/dist/
07:28:52 [build] adapter: @astrojs/cloudflare
07:28:52 [build] Collecting build info...
07:28:52 [build] ✓ Completed in 59ms.
07:28:52 [build] Building server entrypoints...
07:28:54 [build] ✓ Completed in 1.82s.
07:28:54 
 finalizing server assets 

07:28:54 [build] Rearranging server assets...
✘ [ERROR] Could not resolve "node:url"

    node_modules/@astrojs/markdown-remark/dist/load-plugins.js:3:30:
      3 │ import { pathToFileURL } from "node:url";
        ╵                               ~~~~~~~~~~

  The package "node:url" 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.

✘ [ERROR] Could not resolve "node:fs"

    node_modules/import-meta-resolve/lib/resolve.js:11:44:
      11 │ import {Stats, statSync, realpathSync} from 'node:fs'
         ╵                                             ~~~~~~~~~

  The package "node:fs" 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.

✘ [ERROR] Could not resolve "node:url"

    node_modules/import-meta-resolve/lib/resolve.js:13:48:
      13 │ import {URL, fileURLToPath, pathToFileURL} from 'node:url'
         ╵                                                 ~~~~~~~~~~

  The package "node:url" 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.

✘ [ERROR] Could not resolve "node:module"

    node_modules/import-meta-resolve/lib/resolve.js:15:29:
      15 │ import {builtinModules} from 'node:module'
         ╵                              ~~~~~~~~~~~~~

  The package "node:module" 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.

✘ [ERROR] Could not resolve "node:url"

    node_modules/import-meta-resolve/lib/get-format.js:5:28:
      5 │ import {fileURLToPath} from 'node:url'
        ╵                             ~~~~~~~~~~

  The package "node:url" 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.

✘ [ERROR] Could not resolve "node:v8"

    node_modules/import-meta-resolve/lib/errors.js:19:15:
      19 │ import v8 from 'node:v8'
         ╵                ~~~~~~~~~

  The package "node:v8" 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.

✘ [ERROR] Could not resolve "node:url"

    node_modules/import-meta-resolve/lib/errors.js:23:18:
      23 │ import {URL} from 'node:url'
         ╵                   ~~~~~~~~~~

  The package "node:url" 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.

✘ [ERROR] Could not resolve "node:url"

    node_modules/import-meta-resolve/lib/package-config.js:9:33:
      9 │ import {URL, fileURLToPath} from 'node:url'
        ╵                                  ~~~~~~~~~~

  The package "node:url" 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.

✘ [ERROR] Could not resolve "node:fs"

    node_modules/import-meta-resolve/lib/package-json-reader.js:22:15:
      22 │ import fs from 'node:fs'
         ╵                ~~~~~~~~~

  The package "node:fs" 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.

✘ [ERROR] Could not resolve "node:url"

    node_modules/import-meta-resolve/lib/package-json-reader.js:24:28:
      24 │ import {fileURLToPath} from 'node:url'
         ╵                             ~~~~~~~~~~

  The package "node:url" 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.

Could not resolve "node:url"
  Stack trace:
    at failureErrorWithLog (/workspaces/workspace/node_modules/esbuild/lib/main.js:1650:15)
    at /workspaces/workspace/node_modules/esbuild/lib/main.js:1003:52
    at /workspaces/workspace/node_modules/esbuild/lib/main.js:1085:16
    at handleIncomingPacket (/workspaces/workspace/node_modules/esbuild/lib/main.js:763:9)
    at Socket.emit (node:events:514:28)

Note:

• Build only fails when <Code> is used
• Build works for the node adapter even with <Code>
• Cloudflare Adapter version: 8.0.0

Thanks

What's the expected result?

The build should succeed.

Link to Minimal Reproducible Example

https://codesandbox.io/p/devbox/suspicious-wozniak-82gcxq

Participation

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

[ematipico]

@alexanderniebuhr should we add node:url module to the list of external modules?

[alexanderniebuhr]

@ematipico I don't think we can.
Node's url is not supported by Cloudflare's SSR runtime (https://developers.cloudflare.com/workers/runtime-apis/nodejs/)

✘ [ERROR] Could not resolve "node:url"

    node_modules/@astrojs/markdown-remark/dist/load-plugins.js:3:30:
      3 │ import { pathToFileURL } from "node:url";
        ╵                               ~~~~~~~~~~

Can someone elaborate, when this is needed, is it during runtime? If so it won't work, cause Cloudflare's edge runtime doesn't have filesystem. If it is only needed during build/compile time, we might be able to fix this.

[ematipico]

https://github.com/withastro/astro/blob/main/packages%2Fmarkdown%2Fremark%2Fsrc%2Fload-plugins.ts#L4-L6

Maybe we can work around it

[alexanderniebuhr]

In general I advise that everything is possible using Cloudflare, it is just a matter of how to write code. I guess if we refactor some stuff, we might be able to get it running on Cloudflare. I'm happy to help, but don't have to much time right now though!

[bluwy]

I can probably look into this. This seems to reveal a bigger problem where we might be including a larger bundle than expected for Code.astro in SSR. Presumably since I refactored the shiki handling to a single place in @astrojs/markdown-remark now, perhaps the package has side-effects that's incorrectly pulling these new code.

[bluwy]

I've sent 3 PRs that should fix this. It's a conglomerate of different issues causing this problem 😬

• fix(ssr): support externalized builtins for webworker vitejs/vite#15656
• fix(ssr): mark builtin modules as side effect free vitejs/vite#15658
• Fix @astrojs/markdown-remark bundling for non-node runtimes astro#9736

One quicker way of fixing this too is to refactor Code.astro to reference like:

import { createShikiHighlighter } from '@astrojs/markdown-remark/shiki';

So that it's more runtime-agnostic. Now that I typed this out, I think that might be the better solution instead and will try that 😄