# Use external library js

**URL:** <https://discourse.aurelia.io/t/use-external-library-js/3078>\
**Category:** Help Requests\
**Created:** [November 20, 2019, 4:48pm UTC](https://discourse.aurelia.io/t/use-external-library-js/3078 "2019-11-20T16:48:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![theman](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@theman](https://discourse.aurelia.io/u/theman)\
**Post date:** [November 20, 2019, 4:48pm UTC](https://discourse.aurelia.io/t/use-external-library-js/3078/1 "2019-11-20T16:48:59Z")

</div>

Hi all,

i would like to use SortableJS without using npm in my site with typescript aurelia.

I linked in index.html the .js :

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/7/7a141315dce88875536c4c529d85647d8d52021e.png)  
 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/0/071b75448b0aea84919d92a494151304a10e9c56.png)  
if i use it on index.html it works( and it’s ok)  
but when i try to use it on my vm i can’t import this module:  
 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/5/5d9be3de83ce5f29ae56b3ec6eede5b2b5b1da7f.png)

anyone have the response?

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/6/62ec7e8bf348c2bc5d99af5ddb92b6eccf4b530c.png)

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [November 20, 2019, 5:22pm UTC](https://discourse.aurelia.io/t/use-external-library-js/3078/2 "2019-11-20T17:22:48Z")

</div>

I am just an Aurelia hack here, but wouldn’t that make it a dom global.

I am not sure it is the correct pattern for adding external libraries, but there is a “prepend” section in aurelia\_project/aurelia.json where the CLI adds in javascript libraries.

Would still have to get typescript to understand the types for it I think.

edit: I just found this as well.

> **[eriklieben/aurelia-sortablejs](https://github.com/eriklieben/aurelia-sortablejs)**
>
> Aurelia plugin to use sortablejs https://github.com/RubaXa/Sortable - eriklieben/aurelia-sortablejs

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [November 20, 2019, 5:51pm UTC](https://discourse.aurelia.io/t/use-external-library-js/3078/3 "2019-11-20T17:51:18Z")

</div>

There are a number of different ways to work with this. One thing to keep in mind is that some of the jQuery plugins aren’t designed to export modules so you can’t use `import { ModuleName } from 'lib';`. One method we’ve used was to make sure jQuery was loaded globally since it’s used all over and with many 3rd party libs such as bootstrap. For example, if you are using webpack you can add it to your webpack.config.js like …

```auto
...

entry: {
        app: ['@babel/polyfill', 'aurelia-bootstrapper'],
        vendor: ['bluebird', 'jquery']
    },

...

new ProvidePlugin({
            Promise: 'bluebird',
            $: 'jquery',
            'window.$': 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
...

```

Then for those none module jquery plugins you can just use `import 'sortablejs'` which will attach to the global jQuery/$ object.

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [November 20, 2019, 6:19pm UTC](https://discourse.aurelia.io/t/use-external-library-js/3078/4 "2019-11-20T18:19:41Z")

</div>

If you already have $ globally accessible then you can just use `import 'sortablejs';`

---

<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:** [November 20, 2019, 9:12pm UTC](https://discourse.aurelia.io/t/use-external-library-js/3078/5 "2019-11-20T21:12:05Z")

</div>

FYI, if you just need some reordering functionality, try [bcx-aurelia-reorderable-repeat](https://buttonwoodcx.github.io/doc-bcx-aurelia-dnd/#/reorderable-repeat).

---

<div class="post-metadata">

**Author:** ![theman](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@theman](https://discourse.aurelia.io/u/theman)\
**Post date:** [November 21, 2019, 3:09pm UTC](https://discourse.aurelia.io/t/use-external-library-js/3078/6 "2019-11-21T15:09:41Z")

</div>

thanks guys for the help.

At least I installed all from npm.

---

<div class="post-metadata">

**Author:** ![theman](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@theman](https://discourse.aurelia.io/u/theman)\
**Post date:** [November 21, 2019, 3:11pm UTC](https://discourse.aurelia.io/t/use-external-library-js/3078/7 "2019-11-21T15:11:08Z")

</div>

Thanks,

i tryied but it didn’t work.  
“$” give me “undefined” data, it seems that jquery doesn’t see the script …  
but no problem, I installed all with npm.