1

Trying to use howler.js (https://github.com/goldfire/howler.js#documentation) in a Controller.

There is no addon for Howler but it exists as a npm package.

I did an npm install and subsequently got an update in package.json like this :

"dependencies": { "bootswatch": "^4.0.0", "howler": "^2.0.9", "npm": "^5.8.0" }

In the controller I added this import

import {Howl} from 'howler';

But when I try to execute the code I get a runtime error

Could not find module 'howler' imported from 'foo/controllers/bar'

When I do a find for *howl* this is what I find

./node_modules/howler/dist/howler.js ./node_modules/howler/dist/howler.core.min.js ./node_modules/howler/dist/howler.min.js ./node_modules/howler/dist/howler.spatial.min.js ./node_modules/howler/src/howler.core.js ./node_modules/howler/src/plugins/howler.spatial.js

Should my import have a path to these files as part of it ? If so which one ?

Would appreciate some advice about whether there's something obviously wrong in what I've done there.

Emberjs version is 3.0.

Thanks

glaucon
  • 8,112
  • 9
  • 41
  • 63
  • I think the package `howl` is not exporting an es6 module! Try to access it via window global variable - `Howl` like in the docs - https://github.com/goldfire/howler.js#examples – Gokul Kathirvel Apr 29 '18 at 12:39
  • @GokulKathirvel : Thanks. Before I read your reply I had decided to try to use ember-browserify which helped but hasn't yet worked . I have created a new question here https://stackoverflow.com/questions/50091963/emberjs-ember-browserify-x-is-not-a-constructor?noredirect=1&lq=1 .Thanks again. – glaucon Apr 29 '18 at 22:39
  • Possible duplicate of [How to use third party npm packages with ember cli app](https://stackoverflow.com/questions/26544578/how-to-use-third-party-npm-packages-with-ember-cli-app) – Jacob van Lingen Apr 30 '18 at 12:48

1 Answers1

3

You can import the howler.js inside your ember-cli-build.js like this

app.import('node_modules/howler/dist/howler.min.js')

Then you can use Howl as global variable inside you ember app.

Abhishek Gupta
  • 1,297
  • 13
  • 28
  • Thanks. Before I read your reply I had decided to try to use ember-browserify which has raised a different issue. I have created a new question about that : https://stackoverflow.com/questions/50091963/emberjs-ember-browserify-x-is-not-a-constructor?noredirect=1&lq=1 . Thanks for your suggestion. – glaucon Apr 29 '18 at 22:41
  • 3
    In addition to the above, I would recommend also adding a vendor-shim to prevent using `Howl` as a global variable. See [this](https://ember-cli.com/user-guide/#javascript-assets). – Mikko Paderes Apr 30 '18 at 03:46