kit icon indicating copy to clipboard operation
kit copied to clipboard

Cloudflare Worker: TypeError: Cannot read properties of undefined (reading 'fetch') with SvelteKit 2.21, Svelte 5.33, Adapter-Cloudflare 7.0.3, and nodejs_compat

Open FrancisSamo opened this issue 6 months ago • 4 comments

Describe the bug

Hi SvelteKit Team,

I'm encountering a persistent server-side TypeError: Cannot read properties of undefined (reading 'fetch') when deploying a SvelteKit application to Cloudflare Workers. This error occurs when the worker attempts to serve SvelteKit's own generated JavaScript/CSS assets, resulting in HTTP 500 errors for these assets in the browser.

I am using the latest stable versions of SvelteKit and Svelte, along with the version of @sveltejs/adapter-cloudflare currently listed as latest on NPM. The issue arises despite using compatibility_date = "2024-09-23" and compatibility_flags = [ "nodejs_compat" ] in wrangler.toml, which should provide the necessary Node.js environment and fetch API.

Key Environment Details from Minimal Reproduction:

  • @sveltejs/kit: ^2.21.1
  • svelte: ^5.33.4
  • @sveltejs/adapter-cloudflare: ^7.0.3 (current latest on NPM as of 2025-05-27)
  • vite: ^6.3.5 (Note: SvelteKit ^2.21.1 typically scaffolds with Vite 5.x. My reproduction uses Vite ^6.3.5 as listed in its package.json)
  • wrangler: 4.16.1

Minimal Reproduction: I have created a minimal reproduction repository that consistently demonstrates this issue: https://github.com/FrancisSamo/my-cf-fetch-test

The README.md in the repository contains:

  • Detailed steps to reproduce.
  • Full package.json dependencies used.
  • svelte.config.js configuration.
  • wrangler.toml configuration.
  • The actual error log output from Cloudflare Workers when the bug is triggered by the minimal reproduction.

Summary of Error from Minimal Reproduction's Cloudflare Log:

{
  "source": {
    "message": "Cannot read properties of undefined (reading 'fetch')",
    "exception": {
      "stack": "    at Object.fetch (_worker.js:21546:31)", // Line number from the repro's log
      "name": "TypeError",
      "message": "Cannot read properties of undefined (reading 'fetch')"
    }
    // ... other relevant parts of the log from your README ...
  },
  "scriptName": "my-cf-fetch-test"
  // ...
}
The error stack trace consistently points to `at Object.fetch (_worker.js:...)`.

This issue prevents the SvelteKit application from loading its necessary client-side resources when deployed to Cloudflare Workers under these configurations. Given that these appear to be the latest recommended versions, this behavior is unexpected.

Could you please investigate this? Thank you! 🙏

Reproduction

https://github.com/FrancisSamo/my-cf-fetch-test

Logs

{
  "source": {
    "message": "Cannot read properties of undefined (reading 'fetch')",
    "exception": {
      "stack": "    at Object.fetch (_worker.js:21546:31)",
      "name": "TypeError",
      "message": "Cannot read properties of undefined (reading 'fetch')",
      "timestamp": 1748366321052
    },
    "$cloudflare": {
      "$metadata": {
        "id": "01JW9C1SCWRAE997G8AFVY9AVY",
        "type": "cf-worker",
        "error": "Cannot read properties of undefined (reading 'fetch')"
      }
    }
  },
  "dataset": "cloudflare-workers",
  "timestamp": "2025-05-27T17:18:41.052Z",
  "$workers": {
    "truncated": false,
    "event": {
      "request": {
        "url": "https://my-cf-fetch-test.<cf-subdomain>.workers.dev/",
        "method": "GET",
        "path": "/"
      }
    },
    "outcome": "exception",
    "scriptName": "my-cf-fetch-test",
    "eventType": "fetch",
    "executionModel": "stateless",
    "scriptVersion": {
      "id": "7bf589a1-2042-4694-95ff-6d6f66df7424"
    },
    "requestId": "94672c427ae2bac0"
  },
  "$metadata": {
    "id": "01JW9C1SCWRAE997G8AFVY9AVY",
    "requestId": "94672c427ae2bac0",
    "trigger": "GET /",
    "service": "my-cf-fetch-test",
    "level": "error",
    "error": "Cannot read properties of undefined (reading 'fetch')",
    "message": "Cannot read properties of undefined (reading 'fetch')",
    "account": "b7e4dac514add5403e662c5ebf100a3b",
    "type": "cf-worker",
    "fingerprint": "6c8bd26f56e625a02177b880ae3c7ce3",
    "origin": "fetch"
  },
  "links": []
}

System Info

- OS: macOS Sequoia 15.5
- Node.js: 22.13.1
- npm: 11.3.0
- SvelteKit (`@sveltejs/kit`): ^2.21.1
- Svelte (`svelte`): ^5.33.4
- Adapter (`@sveltejs/adapter-cloudflare`): ^7.0.3 (Latest on NPM as of 2025-05-27)
- Vite: ^6.3.5 (As configured in the minimal reproduction `package.json`)
- TypeScript (`typescript`): ^5.8.3
- Wrangler CLI: 4.16.1
- Browser: Brave 1.78.102 (Chromium: 136.0.7103.113), Safari 18.5 (20621.2.5.11.8)

Cloudflare Worker Configuration (`wrangler.toml`):
  - `name`: "my-cf-fetch-test"
  - `main`: ".svelte-kit/cloudflare/_worker.js"
  - `compatibility_date`: "2024-09-23"
  - `compatibility_flags`: ["nodejs_compat"]

Severity

blocking all usage of SvelteKit

Additional Information

No response

FrancisSamo avatar May 27 '25 17:05 FrancisSamo

Sorry about this one! One of the pages/workers predicates is returning falsely. The correct behaviour here is that the build should error and warn you that you need to have the assets.binding and assets.directory keys in your wrangler.toml. See https://svelte.dev/docs/kit/adapter-cloudflare#Cloudflare-Workers for an example. Without these keys, Cloudflare can't serve your static files.

For more information, see https://developers.cloudflare.com/workers/static-assets/ for how static assets are served.

teemingc avatar May 30 '25 16:05 teemingc

Sorry about this one! One of the pages/workers predicates is returning falsely. The correct behaviour here is that the build should error and warn you that you need to have the assets.binding and assets.directory keys in your wrangler.toml. See https://svelte.dev/docs/kit/adapter-cloudflare#Cloudflare-Workers for an example. Without these keys, Cloudflare can't serve your static files.

For more information, see https://developers.cloudflare.com/workers/static-assets/ for how static assets are served.

I have both keys in my wrangler.toml and am still getting the fetch error.

[assets]
binding = "ASSETS"
directory = ".svelte-kit/cloudflare"`

awakesec avatar Jun 04 '25 04:06 awakesec

Sorry about this one! One of the pages/workers predicates is returning falsely. The correct behaviour here is that the build should error and warn you that you need to have the assets.binding and assets.directory keys in your wrangler.toml. See svelte.dev/docs/kit/adapter-cloudflare#Cloudflare-Workers for an example. Without these keys, Cloudflare can't serve your static files. For more information, see developers.cloudflare.com/workers/static-assets for how static assets are served.

I have both keys in my wrangler.toml and am still getting the fetch error.

[assets]
binding = "ASSETS"
directory = ".svelte-kit/cloudflare"`

Can you share your full wrangler config file?

teemingc avatar Jun 04 '25 04:06 teemingc

Can you share your full wrangler config file?

Disregard, I updated my dependencies closer to versions mentioned in the OP and it is working now.

awakesec avatar Jun 04 '25 05:06 awakesec