feross / timidity

Play MIDI files in the browser w/ Web Audio, WebAssembly, and libtimidity
https://bitmidi.com
MIT License
368 stars 38 forks source link

Error when trying to use this in WebPack. #8

Closed chr15m closed 5 years ago

chr15m commented 5 years ago

Hi @feross - I know you're very busy so hopefully this won't take much of your time.

When I try to do a simple import * as timidity from "timidity"; and then run that file through webpack I get the following 2 errors:

ERROR in ./node_modules/timidity/libtimidity.wasm
Module not found: Error: Can't resolve 'env' in '/home/chrism/dev/something/node_modules/timidity'
 @ ./node_modules/timidity/libtimidity.wasm
 @ ./node_modules/timidity/index.js
 @ ./src/js/index.js

ERROR in ./node_modules/timidity/libtimidity.wasm
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* ./src/js/index.js --> ./node_modules/timidity/index.js --> ./node_modules/timidity/libtimidity.wasm

I'm not a heavy webpack user but maybe you have some pointers as to how I can fix this? Will issue a PR if I get it working.

chr15m commented 5 years ago

If I follow the advice in the second error it goes away but I still get the first error ("Can't resolve 'env'").

chr15m commented 5 years ago

Just saw this: https://github.com/webpack/webpack/issues/7352

I will follow up with the workaround linked there.

chr15m commented 5 years ago

I got webpack to build without errors using the suggested workaround:

  "module": {
    "rules": [
      {
        "test": /libtimidity\.wasm$/,
        "type": "javascript/auto", // ← !!
        "loader": "file-loader",
        "options": {
          "publicPath": "/"
        }
      }
    ]
  }

However I couldn't figure out how to use that build. In the end I gave up and just used bg-sound in a script tag and banged a <bg-audio src="...mid"> into the page.

Hopefully in future somebody will get a demo app working with Timidity using Webpack.

feross commented 5 years ago

Glad you got it working. I'm not sure what the webpack issue is. It works fine in browserify with no config needed.

chr15m commented 5 years ago

Yes I don't know why I didn't just try a browserify build instead. Great idea. Will do that for the next iteration. Thanks @feross very much appreciate your work!