"MidiPlayer.Player is not a constructor

[robopeter]

If I upgrade this library to a version greater than 2.0.5 I get the exception MidiPlayer.Player is not a constructor when I do: var Player = new MidiPlayer.Player(function(event) {. If I roll back to 2.0.5 it works properly.

I was successfully using import MidiPlayer from 'midi-player-js' with 2.0.5, but that fails with newer versions. I have also tried with var MidiPlayer = require('midi-player-js') as documented on the home page of this project, but this doesn't work with versions > 2.0.5 either.

Can you provide any pointers to what might have changed and/or what I should change to make things work again? Thank you!

[grimmdude]

Hi @robopeter,

Thanks for your message, I actually just noticed that myself too. It only seems to happen in certain environment setups, I'm checking to see what could have happened.

For instance, if you use const MidiPlayer = require('midi-player-js') and execute in node via cli it seems to work fine.

[robopeter]

If it helps, I'm using it as part of a PWA / Cordova app built with the Quasar Framework. I haven't messed with the WebPack / babel / etc configuration that Quasar gives you out of the box (at least I don't think I have).

[grimmdude]

Wow, turns out webpack prioritizes the browser field in package.json and I had that set to the path of the file which could be used directly in the browser. Guess I misunderstood the use of that field. Should be fixed now in 2.0.11.

https://www.jonathancreamer.com/how-webpack-decides-what-entry-to-load-from-a-package-json/

-Garrett

[robopeter]

Confirmed this fix worked for me too! Thank you for your prompt fix! 👍

[swampthang]

I'm using webpack and midi-player-js version 2.0.16 and am seeing the same issue. Thought you might want to know about this or maybe I'm understanding wrong.

In my index.js file, I have the following:

const Soundfont = require('soundfont-player');
const MidiPlayer = require('midi-player-js');

// shown in docs - https://grimmdude.com/MidiPlayerJS/docs/
const Player = new MidiPlayer.Player(function(event) {
    console.log(event);
});

I get that same error (Uncaught TypeError: MidiPlayer.Player is not a constructor).

I noticed when debugging that MidiPlayer.Player is undefined. MidiPlayer.default.Player() IS defined... ...

So, I'm now using new MidiPlayer.default.Player() Is that gonna cause any issues?

[grimmdude]

Looks like this issue arose from changes in Babel 7 https://babeljs.io/docs/en/v7-migration-api#export-changes

Dropped use of add-module-exports plugin on Babel packages. This had to be used earlier to prevent a breaking change with our exports. If you import a Babel package in a library you may need to use .default when using require rather than import.

I think this is probably OK to leave as is now that we're aware, but I will update the documentation to reflect this. Using ES6 import probably makes more sense in the docs since that aligns with how the library is written.

import MidiPlayer from 'midi-player-js'