Magic-string version causes errors with Threlte (svelte lib)

[jerzakm]

What version of astro are you using?

^1.6.13

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

npm, pnpm

What operating system are you using?

Windows, Linux

Describe the Bug

I was trying to implement a Threlte component. It's a Svelte library for Three.js and it uses it's own pre-processor. (https://threlte.xyz/getting-started#installation)

I am getting this error:

  File:
    C:/Users/Firma/Documents/Github/astro-threlte-issue/src/components/App.svelte
  Stacktrace:
TypeError: Error while preprocessing C:/Users/Firma/Documents/Github/astro-threlte-issue/src/components/App.svelte - markup.update is not a function
    at Object.enter (file:///C:/Users/Firma/Documents/Github/astro-threlte-issue/node_modules/@threlte/preprocess/dist/index.js:121:32)

This is a repo to reproduce the error. Stackblitz example doesn't build either but I don't see full error message (could be just me not knowing where it outputs :P )
https://github.com/jerzakm/astro-threlte-issue

Why it's broken
It is happening because magicstring.update was released in 26.6 and astro uses "magic-string": "^0.25.9"
Rich-Harris/magic-string@7b45b9b

Quick fix
Simply installing magic-string inside the project as dev dependency fixes the issue
npm i -D magic-string

Permanent fix proposal
Update astro's magic-string. I am not familiar with astro internals so I'm not sure if this would cause any major problems. I'm willing to make a PR with it.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wmsgt4?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

@jerzakm a PR would be very welcome here!