search

sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.58k stars 1.92k forks source link

Cloudflare adapter worker build is resolving client-side files from libraries #12813

Open Lms24 opened 3 days ago

Lms24 commented 3 days ago

Describe the bug

When using our package @sentry/sveltekit in a minimal SvelteKit app with @sveltejs/adapter-cloudflare, a build error is logged when the adapter is invoked (see logs).

Upon closer inspection, it seems like the esbuild build within the cloudflare adapter is resolving the browser entry of our package's package.json exports instead of the server-side part. In the client-side part of our SDK package, we import { page, navigating } from "$app/stores" which esbuild can't resolve and therefore throws an error.

I already tried adding a worker exports condition in our package.json that would point to server files but this doesn't do anything. It still seems like esbuild is accessing our bowser exports entry point.

Reproduction

I created a minimal reproduction - please feel free to clone it

Logs

> Using @sveltejs/adapter-cloudflare
✘ [ERROR] Could not resolve "$app/stores"

    node_modules/@sentry/sveltekit/build/esm/client/browserTracingIntegration.js:1:33:
      1 │ import { page, navigating } from '$app/stores';
        ╵                                  ~~~~~~~~~~~~~

  You can mark the path "$app/stores" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

error during build:
Error: Bundling with esbuild failed with 1 error
    at adapt (file:///Users/lukas/code/test-projects/gh-sentry-javascript-13976-sveltekit-cloudflare-pages/my-svelte-app/node_modules/@sveltejs/adapter-cloudflare/index.js:140:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async adapt (file:///Users/lukas/code/test-projects/gh-sentry-javascript-13976-sveltekit-cloudflare-pages/my-svelte-app/node_modules/@sveltejs/kit/src/core/adapt/index.js:38:2)
    at async finalise (file:///Users/lukas/code/test-projects/gh-sentry-javascript-13976-sveltekit-cloudflare-pages/my-svelte-app/node_modules/@sveltejs/kit/src/exports/vite/index.js:891:7)
    at async Object.handler (file:///Users/lukas/code/test-projects/gh-sentry-javascript-13976-sveltekit-cloudflare-pages/my-svelte-app/node_modules/@sveltejs/kit/src/exports/vite/index.js:921:5)
    at async PluginDriver.hookParallel (file:///Users/lukas/code/test-projects/gh-sentry-javascript-13976-sveltekit-cloudflare-pages/my-svelte-app/node_modules/rollup/dist/es/shared/node-entry.js:20652:17)
    at async Object.close (file:///Users/lukas/code/test-projects/gh-sentry-javascript-13976-sveltekit-cloudflare-pages/my-svelte-app/node_modules/rollup/dist/es/shared/node-entry.js:21627:13)
    at async build (file:///Users/lukas/code/test-projects/gh-sentry-javascript-13976-sveltekit-cloudflare-pages/my-svelte-app/node_modules/vite/dist/node/chunks/dep-Cyk9bIUq.js:65455:17)
    at async CAC.<anonymous> (file:///Users/lukas/code/test-projects/gh-sentry-javascript-13976-sveltekit-cloudflare-pages/my-svelte-app/node_modules/vite/dist/node/cli.js:828:5)

System Info

System:
    OS: macOS 14.7
    CPU: (10) arm64 Apple M1 Pro
    Memory: 103.63 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.volta/tools/image/node/20.11.0/bin/node
    Yarn: 4.1.1 - ~/.volta/tools/image/yarn/4.1.1/bin/yarn
    npm: 10.4.0 - ~/.volta/tools/image/npm/10.4.0/bin/npm
    pnpm: 8.14.3 - ~/.volta/tools/image/pnpm/8.14.3/bin/pnpm
    bun: 1.1.26 - ~/.bun/bin/bun
    Watchman: 2024.07.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 101.1.38.111
    Chrome Canary: 123.0.6268.0
    Edge: 129.0.2792.89
    Safari: 17.6
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.5 
    @sveltejs/adapter-cloudflare: ^4.7.3 => 4.7.3 
    @sveltejs/kit: ^2.0.0 => 2.7.1 
    @sveltejs/vite-plugin-svelte: ^4.0.0-next.6 => 4.0.0-next.8 
    svelte: ^5.0.0-next.1 => 5.0.0-next.265 
    vite: ^5.0.3 => 5.4.9

Severity

annoyance

Additional Information

⬆️ RE Severity: Blocker for users who'd like to add Sentry to their SvelteKit app running on Cloudflare

I'd appreciate any pointers as to what we/library authors need to do to support a use case where

Thanks a lot and please let me know if I can provide more information!

eltigerchino commented 11 hours ago

Hi Lukas, thanks for filing this issue. I'm not too knowledgeable on this but I tried adding $app/* to the esbuild external array to see if the build would pass. Then, I got the error where you mentioned it needed to import some server-side code:

✘ [ERROR] No matching export in "node_modules/@sentry/sveltekit/build/esm/index.client.js" for import "sentryHandle"

    .svelte-kit/output/server/chunks/hooks.server.js:10:9:
      10 │ import { sentryHandle, handleErrorWithSentry } from "@sentry/svelt...
         ╵          ~~~~~~~~~~~~

error during build:
Error: Bundling with esbuild failed with 1 error
    at adapt (file:///home/chewteeming/github/sentry-sveltekit-cloudflare-error/node_modules/@sveltejs/adapter-cloudflare/index.js:140:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async adapt (file:///home/chewteeming/github/sentry-sveltekit-cloudflare-error/node_modules/@sveltejs/kit/src/core/adapt/index.js:38:2)
    at async finalise (file:///home/chewteeming/github/sentry-sveltekit-cloudflare-error/node_modules/@sveltejs/kit/src/exports/vite/index.js:891:7)
    at async Object.handler (file:///home/chewteeming/github/sentry-sveltekit-cloudflare-error/node_modules/@sveltejs/kit/src/exports/vite/index.js:921:5)
    at async PluginDriver.hookParallel (file:///home/chewteeming/github/sentry-sveltekit-cloudflare-error/node_modules/rollup/dist/es/shared/node-entry.js:20652:17)
    at async Object.close (file:///home/chewteeming/github/sentry-sveltekit-cloudflare-error/node_modules/rollup/dist/es/shared/node-entry.js:21627:13)
    at async build (file:///home/chewteeming/github/sentry-sveltekit-cloudflare-error/node_modules/vite/dist/node/chunks/dep-Cyk9bIUq.js:65455:17)
    at async CAC.<anonymous> (file:///home/chewteeming/github/sentry-sveltekit-cloudflare-error/node_modules/vite/dist/node/cli.js:828:5)
 ELIFECYCLE  Command failed with exit code 1.

Could you try adding the worker exports condition in addition to making this change to the sveltekit cloudflare adapter and see if that works? In @sveltejs/adapter-cloudlfare/index.js:84:

-           const external = ['cloudflare:*', ...compatible_node_modules.map((id) => `node:${id}`)];
+           const external = ['cloudflare:*', ...compatible_node_modules.map((id) => `node:${id}`), '$app/*'];

Not sure if this is the right thing to do, but to my understanding those $app imports are virtual modules and don't need to bundled in anyway (unless I'm mistaken here). Also, I'm curious if we need to add this to other adapters or if it's just cloudflare

Lms24 commented 10 hours ago

I tried both, setting exports and updating the external array and I get the same error as you:

✘ [ERROR] No matching export in "node_modules/@sentry/sveltekit/build/esm/index.client.js" for import "sentryHandle"

    .svelte-kit/output/server/chunks/hooks.server.js:10:9:
      10 │ import { sentryHandle, handleErrorWithSentry } from "@sentry/svelt...

Which makes sense because sentryHandle is exclusively exported from index.server.js (it's a handler for the handle server hook).

I think the core issue still is that the esbuild build takes the wrong entry point for some reason.

For reference, here are the relevant parts of my package.json after adding the worker entries:

{
  "main": "build/cjs/index.server.js",
  "module": "build/esm/index.server.js",
  "browser": "build/esm/index.client.js",
  "worker": "build/cjs/index.server.js",
  "types": "build/types/index.types.d.ts",
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "types": "./build/types/index.types.d.ts",
      "browser": {
        "import": "./build/esm/index.client.js",
        "require": "./build/cjs/index.client.js"
      },
      "worker": {
        "import": "./build/esm/index.server.js",
        "require": "./build/cjs/index.server.js"
      },
      "node": "./build/cjs/index.server.js"
    }
  }
}

As you can see, the only entries pointing to a client-side entry points are the browser ones.

I'd like to understand what the cloudflare adapter is doing with this esbuild command. Do you know what exactly it is building? I thought it's building a worker script but it doesn't really make sense to me why it'd take browser-side code for that. Maybe my understanding of the adapter is incorrect.

eltigerchino commented 10 hours ago

I'd like to understand what the cloudflare adapter is doing with this esbuild command. Do you know what exactly it is building? I thought it's building a worker script but it doesn't really make sense to me why it'd take browser-side code for that. Maybe my understanding of the adapter is incorrect.

To my understanding, it's bundling all the code and dependencies for the single worker that will be deployed. It uses the same conditions array as Cloudflare when they're bundling for the worker. https://github.com/cloudflare/workers-sdk/blob/a12b2786ce745f24475174bcec994ad691e65b0f/packages/wrangler/src/deployment-bundle/bundle.ts#L35-L36

Lms24 commented 10 hours ago

Sorry for the naive question but the single worker basically is the server-side part of a regular sveltekit build, correct?

eltigerchino commented 8 hours ago

Sorry for the naive question but the single worker basically is the server-side part of a regular sveltekit build, correct?

Yes, that's right.