# Integrating 3rd Party scripts

**URL:** <https://discourse.aurelia.io/t/integrating-3rd-party-scripts/1194>\
**Category:** Framework Knowledge\
**Created:** [May 7, 2018, 6:37am UTC](https://discourse.aurelia.io/t/integrating-3rd-party-scripts/1194 "2018-05-07T06:37:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kuzmycz](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kuzmycz/32/1245_2.png) [@kuzmycz](https://discourse.aurelia.io/u/kuzmycz)\
**Post date:** [May 7, 2018, 6:37am UTC](https://discourse.aurelia.io/t/integrating-3rd-party-scripts/1194/1 "2018-05-07T06:37:02Z")

</div>

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": [
              "jquery"
      ]
  }

```

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';

@noView()
@inject(Element)
export class Sparkline {
  domElement: any;

  constructor(private elm: Element) {}

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

    this.domElement.sparkline([10,8,5,7,4,4,1]);
  }
}

```

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.

Regards,  
Mark.

---

<div class="post-metadata">

**Author:** ![dnkm](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dnkm/32/594_2.png) [@dnkm](https://discourse.aurelia.io/u/dnkm)\
**Post date:** [May 7, 2018, 8:40am UTC](https://discourse.aurelia.io/t/integrating-3rd-party-scripts/1194/2 "2018-05-07T08:40:37Z")

</div>

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

```auto
          {
            "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.

---

<div class="post-metadata">

**Author:** ![kuzmycz](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kuzmycz/32/1245_2.png) [@kuzmycz](https://discourse.aurelia.io/u/kuzmycz)\
**Post date:** [May 8, 2018, 1:40am UTC](https://discourse.aurelia.io/t/integrating-3rd-party-scripts/1194/3 "2018-05-08T01:40:06Z")

</div>

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  
`require('../../../node_modules/jquery.sparkline/jquery.sparkline');`  
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?

Regards,  
Mark.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 8, 2018, 5:33am UTC](https://discourse.aurelia.io/t/integrating-3rd-party-scripts/1194/4 "2018-05-08T05:33:54Z")

</div>

I could not find npm package named `jquery.sparkline` in [npmjs.com](http://npmjs.com), are you sure you are not using `jquery-sparkline`?

Change

```auto
import {} from 'jquery.sparkline';

```

To

```auto
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).

---

<div class="post-metadata">

**Author:** ![kuzmycz](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kuzmycz/32/1245_2.png) [@kuzmycz](https://discourse.aurelia.io/u/kuzmycz)\
**Post date:** [May 8, 2018, 6:14am UTC](https://discourse.aurelia.io/t/integrating-3rd-party-scripts/1194/5 "2018-05-08T06:14:36Z")

</div>

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).