TypeError: __vite_ssr_import_1__.Synth is not a constructor in new Sveltekit project.

[mediashock]

Describe the bug
I created a totally new sveltekit project (i tried both v4 and v5 of svelte)
added tone using npm i tone.
imported tone using

import * as Tone from 'tone';
const synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease("C4", "8n");

I get this error
TypeError: vite_ssr_import_1.Synth is not a constructor

[tambien]

I'm not familiar with vite, but just judging by the error, it says vite_ssr_import which might imply server-side rendering. it's possible that Tone.js (since it's designed for the browser) threw an error which stopped the rest of the loading

[yl92]

With 14.9.17 is there any changes to how we should import Tone? This could be the same error, I'm also using import * as Tone from 'tone';.

new Tone.Reverb(c.reverbOptions); // note that this did not raise any error in TypeScript
results in error:
export 'Reverb' (imported as 'Tone') was not found in 'tone' (module has no exports) <- error in the browser

The same code works ok with 14.7.77.

[mediashock]

I think I have to initialize it inside the onmount. I just switched it to include it from a CDN and everything works but I read onmount is where code should be placed inside a svelte project.

[tambien]

With 14.9.17 is there any changes to how we should import Tone? This could be the same error, I'm also using import * as Tone from 'tone';.

new Tone.Reverb(c.reverbOptions); // note that this did not raise any error in TypeScript results in error: export 'Reverb' (imported as 'Tone') was not found in 'tone' (module has no exports) <- error in the browser

The same code works ok with 14.7.77.

@yl92 could you try npm i tone@next? There might have been some breaks with the way the package is imported, if that's the case i'll promote the @next version to @latest to hopefully resolve this issue for anyone having it

[yl92]

Thank you @tambien , tone@next worked and there's no longer any errors 🙌

[tambien]

I think I have to initialize it inside the onmount. I just switched it to include it from a CDN and everything works but I read onmount is where code should be placed inside a svelte project.

Glad you got it working!