Migrate to SvelteKit 2.0

[wesbos]

need to see if this builds, but seems pretty smooth.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
syntax-website	✅ Ready (Inspect)	Visit Preview	Jan 11, 2024 7:59pm

[wesbos]

Build is breaking - I think related to the Sentry integration / moving to Vite 5

/node_modules/@sentry/node/esm/transports/http.js".
    at error (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
    at Module.error (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:12753:16)
    at Module.traceVariable (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:13190:29)
    at ModuleScope.findVariable (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:11607:39)
    at FunctionScope.findVariable (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:5911:38)
    at FunctionBodyScope.findVariable (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:5911:38)
    at Identifier.bind (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:7193:40)
    at NewExpression.bind (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:4639:23)
    at ReturnStatement.bind (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:4639:23)
    at BlockStatement.bind (file:///vercel/path0/node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:4635:28)
 ELIFECYCLE  Command failed with exit code 1.
ERROR: "build:svelte" exited with 1.
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm build" exited with 1

will ping @AbhiPrasad as he made the issue on sentry-javascript

getsentry/sentry-javascript#9851

[Lms24]

Hey @wesbos I'm currently trying to get the SDK to work with Kit 2.0. To debug, I cloned this repo and checked out your PR.

I think I've identified a fix for the problem but I'm not entirely sure because I don't get the exact same error and some other weird stuff is going on. The error I'm getting is pretty similar though to the one from CI.

Could you test something for me:
Add this exports property in node_modules/@sentry/sveltekit/package.json:

  "exports": {
    "browser": "./esm/index.client.js",
    "node": "./cjs/index.server.js"
  },

For me, adding these conditional exports resolved the build error.
If possible, I'd like to confirm this fixes things for you, too, before publishing the fix in the next SDK version.

---

some other weird stuff is going on

To expand on this: for some reason hydration seems to break in dev mode for me. For a split second, I can see the SSR html in the browser but then I get an error 500 page (no console output though). However, this still happens, even if I remove all Sentry SDK usage. Not sure if this is a kit bug or has something to do with the env variables I (didn't) set.

[stolinski]

Would love to get this merged. Might dive in an confirm we are gtg here. Would love to get on Node 20.

[AbhiPrasad]

Latest version of the SDK should have SvelteKit 2.0 support - it was specifically released with https://github.com/getsentry/sentry-javascript/releases/tag/7.89.0

SDK is also tests with latest Node 20/21, so you should be good to go there!

[stolinski]

@AbhiPrasad it seems like this error is still happening in Sentry/SvelteKit 7.93. I'll try removing the Sentry code and diving in further.

[stolinski]

As you suspected @AbhiPrasad the issue is not with Sentry. Very difficult to get a handle on where the problem actually is though.

[stolinski]

Found it! SearchResults.svelte importing the type Tree without import type. 🥴

[stolinski]

Ok sorry for the spam, going to re-add the Sentry code. Test more and get this pushed up and merged.

[AbhiPrasad]

SearchResults.svelte importing the type Tree without import type

Very tricky. Looking at your tsconfig I do see "importsNotUsedAsValues": "preserve", which should mean you don't have to switch to import type. importsNotUsedAsValues is deprecated though, and replaced with new verbatimModuleSyntax TS option in the latest TS versions.

https://github.com/syntaxfm/website/blob/f2d24d98400e4c1a29ac9ceed70d8f5c57d0b96d/tsconfig.json#L13C3-L13C40

In Sveltekit 2.0 the generated tsconfig in ./.svelte-kit/tsconfig.json now sets verbatimModuleSyntax, which overrides importsNotUsedAsValues and makes you now require import type. I would keep the change as explicit type imports is way better for bundler/TypeScript, but I'm surprised that svelte-migrate codemod didn't catch this and that the error was hard to debug.