samedi 20 février 2021

Include Ember Addon dependencies in parent app

I have an Ember addon that gets consumed by my main application.

In the addon I added the https://www.npmjs.com/package/ion-rangeslider to my addon's package.json file.

"dependencies": { 
   "ion-rangeslider": "^2.3.1"
}

I added some imports to my addon's ember-cli-build.js file:

module.exports = function(defaults) {
  let app = new EmberAddon(defaults, {
    'ember-cli-babel': {
      includePolyfill: true
    }
  });

  app.import('node_modules/ion-rangeslider/js/ion.rangeSlider.js');
  app.import('node_modules/ion-rangeslider/css/ion.rangeSlider.css');
  return app.toTree();
};

Then I use it one of my addons components

import Component from '@glimmer/component';
import $ from 'jquery';

export default class MyComponent extends Component {
  constructor() {
    super(...arguments);

    $('.my-input-element').ionRangeSlider({
      skin: 'round',
      type: 'double',
      min: 0,
      max: 100,
      from: 10,
      to: 30
    });
  }
}

In the context of my addo (dummy app, integration tests, etc...) the slider is initialized and rendered fine:

enter image description here

But when I use the component in my main app I get the following error:

Uncaught TypeError: (0 , _jquery.default)(...).ionRangeSlider is not a function

How can I include/insert the ion-rangeSlider CSS and JS file to my main app via the addon?

PS: if I add the npm package and ember-cli-build.js entries to my main app, it works fine! Bur I'd like to avoid doing this if possible.




Aucun commentaire:

Enregistrer un commentaire