sentry-javascript icon indicating copy to clipboard operation
sentry-javascript copied to clipboard

Build Error in SvelteKit with Cloudflare Pages Following Cloudflare SvelteKit Framework Guide

Open onursoyer opened this issue 1 year ago • 2 comments

Is there an existing issue for this?

  • [x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
  • [x] I have reviewed the documentation https://docs.sentry.io/
  • [x] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/cloudflare

SDK Version

8.34.0

Framework Version

SvelteKit 2.7.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

import { sequence } from "@sveltejs/kit/hooks";
import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
import * as Sentry from "@sentry/cloudflare";

const handleInitSentry = ({ event, resolve }) => {
  return event.platform
    ? Sentry.wrapRequestHandler(
        {
          options: {
            dsn: 'YOUR_SENTRY_DSN',
            tracesSampleRate: 1.0,
          },
          request: event.request,
          context: event.platform.ctx,
        },
        () => resolve(event)
      )
    : resolve(event);
};

export const handle = sequence(handleInitSentry, sentryHandle());

Steps to Reproduce

  1. npm create svelte@latest my-app
  2. npm i -D @sveltejs/adapter-cloudflare
  3. Follow instructions on Cloudflare Sveltekit Framework Guide

Expected Result

According to documentation I should be able to build the project without error.

Actual Result

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:///home/onur/Documents/dev/sentry/test/node_modules/@sveltejs/adapter-cloudflare/index.js:140:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async adapt (file:///home/onur/Documents/dev/sentry/test/node_modules/@sveltejs/kit/src/core/adapt/index.js:38:2)
    at async finalise (file:///home/onur/Documents/dev/sentry/test/node_modules/@sveltejs/kit/src/exports/vite/index.js:891:7)
    at async Object.handler (file:///home/onur/Documents/dev/sentry/test/node_modules/@sveltejs/kit/src/exports/vite/index.js:921:5)
    at async PluginDriver.hookParallel (file:///home/onur/Documents/dev/sentry/test/node_modules/rollup/dist/es/shared/node-entry.js:20652:17)
    at async Object.close (file:///home/onur/Documents/dev/sentry/test/node_modules/rollup/dist/es/shared/node-entry.js:21627:13)
    at async build (file:///home/onur/Documents/dev/sentry/test/node_modules/vite/dist/node/chunks/dep-Cyk9bIUq.js:65455:17)
    at async CAC.<anonymous> (file:///home/onur/Documents/dev/sentry/test/node_modules/vite/dist/node/cli.js:828:5)

onursoyer avatar Oct 15 '24 00:10 onursoyer

Hi @onursoyer thanks for writing in! I can repro this as well with a freshly created SvelteKit app + Cloudflare. The root cause is us importing these stores in our browserTracingIntegration to correctly start spans for client-side navigations and to update the name of the initial pageload span. I'll check what you can do to work around this for the moment but I don't have a clear solution for this. I wonder why the stores are suddenly not available when using the CF adapter.

Lms24 avatar Oct 15 '24 11:10 Lms24

Hey, so I did some digging and there seems to be a problem with our package's exports in combination with the SvelteKit cloudflare adapter. I chatted a bit with the Svelte team and opened an issue in the SvelteKit repo. I'll let you know once we hear back from the team.

Lms24 avatar Oct 15 '24 13:10 Lms24

Any updates on this?

saturnonearth avatar Nov 09 '24 02:11 saturnonearth

Hey, no updates unfortunately. I'm still waiting on an update from the Svelte team in https://github.com/sveltejs/kit/issues/12813

Lms24 avatar Nov 11 '24 09:11 Lms24

@Lms24 this error occurs even if we locally try to npm run build

m4jor101 avatar Dec 13 '24 21:12 m4jor101

Yes this is to be expected if you use the cloudflare adapter. The build step within this adapter is causing the error. I'm currently reviewing #14672 which might fix this.

Lms24 avatar Dec 16 '24 08:12 Lms24

Hi @Lms24, really looking forward to this. Will this be part of the v9 SDK release?

TimoWilhelm avatar Jan 27 '25 18:01 TimoWilhelm

Hi, the PR is on my list to review. I'll hopefully get to it soon. Sorry that this is taking so long but it's quite a complicated change

Lms24 avatar Jan 28 '25 13:01 Lms24

Are there any workarounds for this? At the moment it looks like I have to go back to using Toucan-js instead of @sentry/cloudflare? Thanks.

mrankine avatar Feb 17 '25 08:02 mrankine

#14672 will get merged this week. We were just waiting on the v9 release and had to do a bit of bugfixing afterwards.

Update: Release postponed to Monday due to an unexpected blocker in CI

Lms24 avatar Feb 17 '25 08:02 Lms24

A PR closing this issue has just been released 🚀

This issue was referenced by PR #14672, which was included in the 9.2.0 release.

github-actions[bot] avatar Feb 24 '25 17:02 github-actions[bot]