Integrating 3rd Party scripts

I am trying to add query.sparkline to my Aurelia project. I have tried adding:

  "jquery.sparkline": {
       "id": "jquery.sparkline",
       "path": "../node_modules/jquery.sparkline",
      "deps": [

to aurelia.json

and in my component I added the lines (in sparkling.ts)

import {inject, bindable, bindingMode, DOM, noView} from 'aurelia-framework';
import $ from 'jquery';
import {} from 'jquery.sparkline';

export class Sparkline {
  domElement: any;

  constructor(private elm: Element) {}

  attached() {
    this.domElement = $(this.elm);


I can see that jquery is loaded (in the browser) but not jquery.sparkline

I am using aurelia cli and webpack 4. Any help would be appreciated.


I got this to work using the following in aurelia.json:

            "name": "jquery.sparkline",
            "path": "../node_modules/jquery-sparkline",
            "main": "jquery.sparkline",
            "deps": ["jquery"]

Note that the path element has a hyphen for jquery-sparkline. In your example you put a "." - to be fair, so did I at first! Hope that solves your issue.

This didn’t work for me. I took a step back and added moments successfully. Aurelia.json changes are not required.

After a bit of investigation I found out that even though import {} from 'jquery.sparkline' might be the correct statement the script was not being loaded as the script was not referenced in the code. If its not referenced, webpack won’t load it . for example,

import * as moment from 'moment';
console.log("The time is " + moment());

Moment.js will load because its referenced. However, with sparkline, the plugin is injected into jQuery and webpack has no way of knowing that $(this.elm).sparkline() refers to the jQuery.sparkline plugin.

So what I did (in sparkling.ts) was change the import to
As a result, the component works as expected.

The only thing is that I am not happy with providing the full path to the script file. Does anyone have a solution for this?


I could not find npm package named jquery.sparkline in, are you sure you are not using jquery-sparkline?


import {} from 'jquery.sparkline';


import {} from 'jquery-sparkline';
// or just
import 'jquery-sparkline';

It works fine.

BTW, webpack doesn’t use aurelia.json to define dependencies (they are for requirejs/systemjs based apps).

Thanks, thats cleaner. The version that I had was from a distribution (non-npm) that I moved across.

Of the two I found
import 'jquery-sparkline';
to work.
The other still doesn’t (for the reason I gave above).