Getting an error in SvelteKit with imports and ESM...

[rchrdnsh]

Trying to use this in sveltekit and getting the following error:

SyntaxError: Named export 'PianoRollSVGVisualizer' not found. The requested module '@magenta/music/esm/core.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@magenta/music/esm/core.js';
const { urlToNoteSequence, PianoRollSVGVisualizer, WaterfallSVGVisualizer, StaffSVGVisualizer, Player, SoundFontPlayer } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:121:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:171:5)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:59463:21)
    at async eval (/src/routes/midi-player.svelte:7:31)
    at async instantiateModule (/Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:59393:9)
Named export 'PianoRollSVGVisualizer' not found. The requested module '@magenta/music/esm/core.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@magenta/music/esm/core.js';
const { urlToNoteSequence, PianoRollSVGVisualizer, WaterfallSVGVisualizer, StaffSVGVisualizer, Player, SoundFontPlayer } = pkg;

file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/html-midi-player/dist/esm/index.js:8
import { urlToNoteSequence, PianoRollSVGVisualizer, WaterfallSVGVisualizer, StaffSVGVisualizer, Player, SoundFontPlayer } from '@magenta/music/esm/core.js';
                            ^^^^^^^^^^^^^^^^^^^^^^

...I'm a bit unsure as to what to do to make it work, or what to change where...any thoughts would be appreciated...

SvelteKit uses Vite which uses ES Build under the hood and is essentially ESM only, if that helps...

[cifkao]

There might be something about magenta.js that prevents it from being used as a true ESModule. Could you please try just including the following import in your project (leaving out html-midi-player) to see if you get the same error?

import { PianoRollSVGVisualizer } from '@magenta/music/esm/core.js';

If yes, then I suggest raising this issue with magenta.js.

[JOELwindows7]

Okay. Just doing as

There might be something about magenta.js that prevents it from being used as a true ESModule. Could you please try just including the following import in your project (leaving out html-midi-player) to see if you get the same error?

import { PianoRollSVGVisualizer } from '@magenta/music/esm/core.js';

If yes, then I suggest raising this issue with magenta.js.

works. here deploy https://app.netlify.com/sites/perkedel/deploys/6363bc8569888f0009e0e50d now.

it was not working with just usual import 'html-midi-player';. here faile https://app.netlify.com/sites/perkedel/deploys/6363b9ff9ae6aa0009f73051

I wanted to also try MIDI

src/components/Elements/MidiPlayer.astro

Perhaps I should try traditional CDNed JS for now instead of npm? let' see..

Spec

framework: Astro