MIDI is not defined

Question

After upgrading the 8.1.3 release of angular to ~9.0.6 and a few other dependencies I get the following error:

loader.js:9 Uncaught ReferenceError: MIDI is not defined
    at Object.../../node_modules/midi/js/loader.js (loader.js:9)
    at __webpack_require__ (bootstrap:79)
    at Object.../../node_modules/abcjs/src/midi/abc_midi_controls.js (abc_midi_controls.js:37)
    at __webpack_require__ (bootstrap:79)
    at Object.../../node_modules/abcjs/src/api/abc_tunebook_midi.js (abc_tunebook_midi.js:3)
    at __webpack_require__ (bootstrap:79)
    at Object.../../node_modules/abcjs/midi.js (midi.js:18)
    at __webpack_require__ (bootstrap:79)
    at Module.../midi-lib/src/lib/service/sheet.service.ts (sheet.service.ts:1)
    at __webpack_require__ (bootstrap:79)

The source code of the dependency having the error:

if (typeof MIDI === 'undefined') MIDI = {};

I tried downgrading: abcjs from ^5.12.0 back to ^5.6.11 @types/webmidi from ^2.0.4 back to ^2.0.3 web-midi-api from ^2.0.7 back to ^2.0.5 typescript from ^3.7.5 back to ^3.4.5 but it did not change anything.

UPDATE: When removing the abcjs dependency from the package.json file, the error was gone and the project application behaved all right.

Here is the upgraded dependencies list from the now working application. Note how the abcjs dependency is gone.

  "dependencies": {
    "@tonejs/midi": "^2.0.15",
    "@types/webmidi": "^2.0.4",
    "core-js": "^2.6.11",
    "fstream": "^1.0.12",
    "midi-file-slicer": "^5.0.45",
    "midi-json-parser": "^6.4.19",
    "nexusui": "^2.0.10",
    "rxjs": "~6.5.4",
    "tone": "^13.4.9",
    "tslib": "^1.10.0",
    "vexflow": "^1.2.90",
    "web-midi-api": "^2.0.7",
    "zone.js": "~0.10.2"
  },
  "peerDependencies": {},
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.6",
    "@angular-devkit/build-ng-packagr": "~0.900.6",
    "@angular/animations": "~9.0.6",
    "@angular/cli": "~9.0.6",
    "@angular/common": "~9.0.6",
    "@angular/compiler": "~9.0.6",
    "@angular/compiler-cli": "~9.0.6",
    "@angular/core": "~9.0.6",
    "@angular/forms": "~9.0.6",
    "@angular/language-service": "~9.0.6",
    "@angular/platform-browser": "~9.0.6",
    "@angular/platform-browser-dynamic": "~9.0.6",
    "@angular/router": "~9.0.6",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-packagr": "^9.0.0",
    "protractor": "^5.4.3",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^3.7.5"
  }

Answer 1

Can you try with the following?

  "abcjs": "6.0.0-beta.8",

I will look at this as soon as I can, but I think that version doesn't depend on the midi.js library by default.

[EDIT] Also, how are you including abcjs? Something like:

const abcjs = require("abcjs");

or some other way?