Error when attempting to upgrade to svelte4

[cesarnml]

Describe the bug

Tried to pnpm i -D svelte@next in my existing sveltekit project but install immediately crashes.

Reproduction

pnpm i -D svelte@next in an existing sveltekit project (project link below)

Repo in question:
https://github.com/cesarnml/portfolio-sveltekit

Logs

➜  portfolio-sveltekit git:(cesar/sc-251_update-all-portfolio-dependencies) ✗ pn i -D svelte@next              
 WARN  deprecated intl-messageformat-parser@3.6.4: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
 WARN  deprecated @formatjs/intl-unified-numberformat@3.3.7: We have renamed the package to @formatjs/intl-numberformat
 WARN  deprecated @formatjs/intl-utils@2.3.0: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
Packages: +22 -16
++++++++++++++++++++++----------------
Progress: resolved 916, reused 895, downloaded 0, added 0, done
node_modules/.pnpm/@sveltejs+kit@1.20.0_svelte@4.0.0-next.0_vite@4.3.9/node_modules/@sveltejs/kit: Running postinstall script, failed in 773ms
.../node_modules/@sveltejs/kit postinstall$ node postinstall.js
│ Error while trying to sync SvelteKit config
│ Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/cesar/Documents/Code/LearnCode/Svelte/portfolio-sveltekit/node_modules/.pnpm/@sentry+svelte@
│     at new NodeError (node:internal/errors:399:5)
│     at exportsNotFound (node:internal/modules/esm/resolve:361:10)
│     at packageExportsResolve (node:internal/modules/esm/resolve:641:13)
│     at resolveExports (node:internal/modules/cjs/loader:565:36)
│     at Module._findPath (node:internal/modules/cjs/loader:634:31)
│     at Module._resolveFilename (node:internal/modules/cjs/loader:1061:27)
│     at Module._load (node:internal/modules/cjs/loader:920:27)
│     at Module.require (node:internal/modules/cjs/loader:1141:19)
│     at require (node:internal/modules/cjs/helpers:110:18)
│     at Object.<anonymous> (/Users/cesar/Documents/Code/LearnCode/Svelte/portfolio-sveltekit/node_modules/.pnpm/@sentry+svelte@7.53.1_svelte@4.0.0-next.0/node_modules/@
│ node:internal/process/promises:288
│             triggerUncaughtException(err, true /* fromPromise */);
│             ^
│ Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/cesar/Documents/Code/LearnCode/Svelte/portfolio-sveltekit/node_modules/.pnpm/@sentry+svelte@
│     at new NodeError (node:internal/errors:399:5)
│     at exportsNotFound (node:internal/modules/esm/resolve:361:10)
│     at packageExportsResolve (node:internal/modules/esm/resolve:641:13)
│     at resolveExports (node:internal/modules/cjs/loader:565:36)
│     at Module._findPath (node:internal/modules/cjs/loader:634:31)
│     at Module._resolveFilename (node:internal/modules/cjs/loader:1061:27)
│     at Module._load (node:internal/modules/cjs/loader:920:27)
│     at Module.require (node:internal/modules/cjs/loader:1141:19)
│     at require (node:internal/modules/cjs/helpers:110:18)
│     at Object.<anonymous> (/Users/cesar/Documents/Code/LearnCode/Svelte/portfolio-sveltekit/node_modules/.pnpm/@sentry+svelte@7.53.1_svelte@4.0.0-next.0/node_modules/@
│   code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
│ }
│ Node.js v18.16.0
└─ Failed in 773ms at /Users/cesar/Documents/Code/LearnCode/Svelte/portfolio-sveltekit/node_modules/.pnpm/@sveltejs+kit@1.20.0_svelte@4.0.0-next.0_vite@4.3.9/node_modules/@sveltejs/kit
 ELIFECYCLE  Command failed with exit code 1.

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Memory: 85.92 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    Watchman: 2023.04.17.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 113.1.51.118
    Chrome: 113.0.5672.126
    Chrome Canary: 116.0.5802.0
    Firefox: 101.0
    Firefox Developer Edition: 114.0
    Firefox Nightly: 111.0a1
    Safari: 16.4
  npmPackages:
    svelte: 3.59.1 => 4.0.0-next.0

Severity

blocking all usage of svelte

[gtm-nayan]

I doubt this is related to updating svelte. Delete your node_modules and run just pnpm i again with the same old version of svelte to confirm.

[cesarnml]

I doubt this is related to updating svelte. Delete your node_modules and run just pnpm i again with the same old version of svelte to confirm.

@gtm-nayan

Sure.

As instructed I ran the following:

Ran:

1. rm -rf node_modules
2. pnpm i (no issue here)
3. pnpm i -D svelte@next

Same bug as reported above occurred on step 3.

[cesarnml]

On a hunch, I uninstalled and removed my sentry integration, and then I was able to install svelte4 without a problem.

Branch without sentry: https://github.com/cesarnml/portfolio-sveltekit/tree/cesar/svelte4bug-remove-sentry

[benmccann]

I'll have to take more of a look later, but I wonder if that package needs to define an exports: https://publint.dev/@sentry/svelte@7.53.1

[cesarnml]

I'll have to take more of a look later, but I wonder if that package needs to define an exports: https://publint.dev/@sentry/svelte@7.53.1

I investigated this a bit further and it seems the error is resolved upon upgrading @sentry/vite-plugin from 0.7.2 (previous release) to the latest version (2.2.0).

The repo below also uses https://publint.dev/@sentry/svelte@7.53.1, but had no issues upgrading to svelte4 when using the newer plugin.

The only difference between the two repos with regard to sentry is the above mentioned plugin version @sentry/vite-plugin.

https://github.com/cesarnml/waka-shortcut-time-stats/blob/e6fdfa6d0eb2d52500aa84a6e903601ae776aeb8/package.json#L18

[dominikg]

it looks like sentry itself is still referencing older versions in their sveltekit package. https://github.com/getsentry/sentry-javascript/blob/develop/packages/sveltekit/package.json#L30

they also don't use exports map at all, instead having module and browser fields in package.json.

https://publint.dev/@sentry/sveltekit@7.54.0

I don't think svelte is doing anything wrong here, rather sentry should update their svelte packages to be esm first.

cc @Lms24 (author of most commits in sentries svelte packages)

[Lms24]

Hi thanks for the ping @dominikg

I'll be out on vacation for the next two weeks so someone please open an issue in our repo with as much information as possible. Our team will take a look and triage.

On first glance:

sentry should update their svelte packages to be esm first

This unfortunately is easier said than done because the Svelte SDK builds on our more general browser and core SDK packages (+ SvelteKit on our Node SDK) which, due to backwards compatibility, we cannot simply make ESM first. We'll have to find a different solution here if this turns out to be the actual problem.

[benmccann]

Thanks @Lms24! It sounds like the packaging issues would just be some nice cleanup and the real issue is the outdated version of @sentry/vite-plugin used by the SvelteKit package. I filed an issue for that here: getsentry/sentry-javascript#8283

I'm going to go ahead and close this since I don't think there's anything else we can do on the Svelte side.