BREAKING CHANGE: The request '@magenta/music/es6/core' failed to resolve only because it was resolved as fully specified

[e7mac]

I got the following error when trying to package the module using webpack into a React app. I'm relatively inexperienced with JS. Does this need us to just change the import to include .js ? Happy to make a PR if that's the case but wanted to surface it here before making the change.

ERROR in ./node_modules/html-midi-player/dist/esm/index.js 8:0-153
Module not found: Error: Can't resolve '@magenta/music/es6/core' in '/Users/mayank/Developer/midi_practice/node_modules/html-midi-player/dist/esm'
Did you mean 'core.js'?
BREAKING CHANGE: The request '@magenta/music/es6/core' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./frontend/components/Player.js 24:0-26
 @ ./frontend/components/Navbar.js 24:0-30 106:54-60
 @ ./frontend/components/MusicLog.js 27:0-30 83:102-108
 @ ./frontend/index.js 3:0-45 8:20-28

webpack 5.11.1 compiled with 1 error in 382 ms

[cifkao]

I don't think the extension should be needed. Have you tried adding it? You can probably just edit the file in your node_modules and check if it solved the problem.

This seems to be new in Webpack 5 and causing problems for a lot of people. The easiest thing seems to be to downgrade to Webpack 4.

I'm also not super knowledgeable about this, so it would be great if someone more experienced weighed in. I would be afraid of changing something blindly as it might break something in bundlers other than Webpack.

[cifkao]

It should also be said that the setup here is probably a bit fragile, because @magenta/music is not distributed as an ESModule, only an ES6 bundle. And I'm not really sure exactly what happens when you try to bundle something which is already a bundle (even though in the past it has somehow worked for me).

This is also why I didn't bundle @magenta/music together with this package. When I did that, it also added TensorFlow.js and the bundle became huge (see notwaldorf/example-magenta-in-ts#6).

That said, I'm not sure why the message says probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"'. Neither of these things is true. But package.json does contain "module": "es6/index.js".

[cifkao]

This should be fixed in html-midi-player@next (1.3.0-0). I changed the import to .js and I'm also importing the @magenta/music ES Module, which is now available.

@e7mac Would you like to try this?

Unfortunately you may run into the same problem with @magenta/music as well, because it also uses imports without file extensions internally. So I don't know how to solve this. What I would recommend is either:

• Not trying to bundle html-midi-player and instead using the provided bundle (together with the @magenta/music/es6/core and Tone.js bundle, as shown in the readme).
• Bundling html-midi-player but not @magenta/music. This can be done by specifying @magenta/music and tone as external dependencies in webpack (via something like externals: { '@magenta/music/esm/core.js': 'core', 'tone': 'Tone' }) and including the @magenta/music/es6/core and Tone.js bundle (e.g. from a CDN) in your web page. (I'm using this option here, but with Parcel instead of webpack.)