Svelte 5 breaks @sanity/visual-editing and thus also @sanity/svelte-loader

[kevpye-fabdata]

Hi all, first of all thanks for all the great work you do.

Describe the bug

After updating a sveltekit project to svelte 5 - which is now released in production - it seems impossible to use @sanity/svelte-loader and @sanity/visual-editing despite svelte 5 being backwards compatible with svelte 4 code.

To Reproduce

Steps to reproduce the behavior:

1. Clone the sveltekit sanity template from here "https://github.com/sanity-io/sanity-template-sveltekit-clean.git"
2. Open the folder you cloned into in VS Code or any other editor
3. There should be 2 folders, app and studio. Using terminal, cd into the app folder.
4. Run npx npm-check-updates -u to update all of the package.json dependancies to latest. This step will have updated the package.json to Svelte 5 - we DO NOT want that just yet so we will downgrade back to svelte 4.
5. Set the following dev dependancies in package.json - "@sveltejs/vite-plugin-svelte": "^3.1.2" and "svelte": "^4.2.19"
6. Run npm install - no errors should be reported
7. Run npm run dev and the dev server should start with no issues
8. Quit the dev server
9. Run npx npm-check-updates -u again. this will upgrade @sveltejs/vite-plugin-svelte and svelte in dev dependancies to support Svelte 5
10. Run npm install --legacy-peer-deps - we require the legacy peer deps flag as sanity svelte code doesn't include v4 of vite-plugin-svelte in the peer deps
11. Run npm run dev and the dev server will fail to start with react errors. I don't know why it is even trying to run react code at all?

Expected behavior

The dev server should start without issue as it did with svelte 4.

Screenshots
These are the error messages after starting the dev server in step 11 above:

Which versions of Sanity are you using?

@sanity/cli (global) 3.59.0 (latest: 3.62.3)
@sanity/image-url 1.1.0 (up to date)
@sanity/svelte-loader 1.12.8 (up to date)
@sanity/types 3.62.3 (up to date)
@sanity/visual-editing 2.4.2 (up to date)

What operating system are you using?

Mac OSX Sonoma 14.6.1

Which versions of Node.js / npm are you running?

npm: 10.9.0
node: v20.11.1

Additional context

This wouldn't be such a major problem if we could simply temporarily uninstall the @sanity/visual-editing dependancy until there is a solution, but as the file previewStore.js in the @sanity svelte-loader package dist folder references @sanity/visual-editing, uninstalling the @sanity/visual-editing dependancy simply won't let the @sanity svelte-loader package run.

Many thanks

[rdunk]

I'm not able to recreate this in a Svelte 5 app, everything works as expected.

Can you verify React has been installed as a peer dependency? React is used by the Visual Editing package to render overlays.

[Kingnoba]

I have the same issue with svelte 5
Svelte 4 official template works.

Edit: Have to use --force to get the peer depedencies.

[disbullief]

Current workaround seems indeed to use npm install --force as @Kingnoba suggested

[PauloMFJ]

+1 currently using --force workaround. Would be great if Svelte 5 was included as part of peer dependencies 🙏

[vhollo]

I have the same issue with svelte 5 Svelte 4 official template works.

Edit: Have to use --force to get the peer depedencies.

Live Edit seems to not work with Svelte 5 (using --force at install)
[svelte-loader] Support Svelte 5 #2242

[jprinaldi]

@rdunk Any updates on this?