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:
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