I am trying to learn Three.js by starting with a Three.js tutorial that uses webpack. (You can find the tutorial repo here.) Everything works until I try to import the midi-player-js package I installed with npm. Nothing I try works. I've tried the require syntax, as well as the import * as syntax. Different errors are thrown, but the most common is that Player (one of the module's classes) cannot be found.
What is going wrong? How can I import npm packages with this setup?
My sample script.js file looks like this, right now:
import * as MidiPlayer from "midi-player-js"
const player = new MidiPlayer.Player(function(event) {
console.log("Ticked")
});
// Load a MIDI file
player.loadFile('PATH_TO_MIDI_FILE');
player.play();
Keep in mind that I've tried other import syntax's, though.
EDIT: Starter HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
</head>
<body>
<canvas class="webgl"></canvas>
</body>
</html>