# How to use npm installed jQuery plugins (or any npm packages)

**URL:** https://discourse.roots.io/t/how-to-use-npm-installed-jquery-plugins-or-any-npm-packages/8241
**Category:** sage
**Created:** 2016-12-01T18:55:17Z
**Posts:** 9

## Post 1 by @rjackson — 2016-12-01T18:55:17Z

I’ve run npm install, and the files are all there, but how are we supposed to bring them into the JS environment?

Specifically hoverIntent, a jQuery plugin, but this is an issue I’ve had throughout sage and am just _requiring_ it now.

Is there a guide buried somewhere in the sage docs or is this just something that’s been left in the aether and assumed everyone already knows.

Sage 9 this time.

---

## Post 2 by @ben — 2016-12-01T18:57:12Z

Sage 9 docs are in progress. Here’s the Sage 9 docs on 3rd party JS:

> <https://github.com/roots/docs/blob/460b9d63e6ef3fefb14f2ecc791af550f5a21c0e/sage/theme-development-and-building.md#3rd-party-packages>

Another example: [Import WOW.js not working correctly with sage 9](https://discourse.roots.io/t/import-wow-js-not-working-correctly-with-sage-9/8198/2)

---

## Post 3 by @rjackson — 2016-12-01T20:29:20Z

Thanks

It’s not working for jquery-hoverintent, I’m just going to bypass the entire Sage JS handling.

---

## Post 4 by @ben — 2016-12-01T20:32:59Z

You’ve mentioned that it’s not working but haven’t given us any specifics. Would love to help…

1. Provide the contents of the files you’ve modified in Sage to try and include it
2. Provide the errors you received

---

## Post 5 by @rjackson — 2016-12-01T21:06:34Z

Hey, Thanks.  
I’ve edited all the files hundreds of times, with little bits from this how to or another.

So according to this one, I placed it in Main.js as such — after the `npm install --save jquery-hoverintent` step (no errors)—and the code is in the `node_modules` folder.

Main.js

```
// import external dependencies
import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

// import local dependencies
import Router from './util/router';
import common from './routes/Common';

import 'jquery-hoverintent/jquery.hoverIntent.js';
```

Then since another one commented to put it into common.js (wow.js example) I also did this.

Common.js

```
/*eslint-disable */
import 'jquery-hoverintent/jquery.hoverIntent.js';

export default {
  init() {

  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
    jQuery('a').hoverIntent(function () {
        console.log('Worky');
    },function (){});
  },
};
```

I turned off all eslint, because I don’t care to use “proper code” when I’m really just trying to get it to register that it exists—why optimize a broken car?

So in one of the many attempts, `npm run build` actually produced functioning code, but the live syncs never worked and `$` or `jQuery` always resulted in hoverIntent() not being a function, or not being defined. I had it as `import $ from jquery` and `import jquery` as the original code was.

The test for it working was always in common but sometimes in the init and others later. Console.log()s everywhere: main.js, common.init(), common.finalize(), often common.finalize() was never run.

I’m not sure if that package even works though, and that could be step 1 in debugging.

Sage package.json -\> `"version": "9.0.0-alpha.3",`

---

## Post 6 by @ben — 2016-12-02T03:56:15Z

> [@rjackson](#):
>
> I turned off all eslint, because I don’t care to use “proper code” when I’m really just trying to get it to register that it exists—why optimize a broken car?

This is a poor reason for disabling ESLint. The reason why that’s in place is to enforce a coding standard. If you don’t want to write ES6, that’s fine, but “why optimize a broken car” is a poor analogy that doesn’t seem related to why you would disable it.

> [@rjackson](#):
>
> So in one of the many attempts, npm run build actually produced functioning code, but the live syncs never worked and $ or jQuery always resulted in hoverIntent() not being a function, or not being defined. I had it as import $ from jquery and import jquery as the original code was.

I’m not sure what you mean here. You got it working, but now it’s not? What are the “live syncs” that never worked?

> [@rjackson](#):
>
> I’m not sure if that package even works though, and that could be step 1 in debugging.
> 
> Sage package.json -\> “version”: “9.0.0-alpha.3”,

Not sure what this has to do in relation to your issue.

I’ll dig into this shortly and post up code on how to use `jquery-hoverIntent` with Sage 9.

---

## Post 7 by @ben — 2016-12-02T04:58:40Z

Here’s how I got it working:

1. `npm install --save hoverintent`  
[hoverintent] ([https://www.npmjs.com/package/hoverintent](https://www.npmjs.com/package/hoverintent)) is written in vanilla JavaScript and is more compatible with the tools that Sage 9 uses for JS
2. In `Common.js`:

```
import hoverintent from 'hoverintent/dist/hoverintent.min';

export default {
  init() {
    // JavaScript to be fired on all pages
    $('a').each(function() {
      hoverintent(this,
      () => {
        // Handler in
        console.log('in');
      }, () => {
        // Handler out
        console.log('out');
      }).options();
    });
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};
```

---

## Post 8 by @kalenjohnson — 2016-12-02T05:02:57Z

> [@rjackson](#):
>
> import ‘jquery-hoverintent/jquery.hoverIntent.js’;

> [@ben](#):
>
> import hoverintent from ‘hoverintent/dist/hoverintent.min’;

Basically, if a package is not set up for ES6 (it does not export anything), then you need to reference the file directly from the package.

---

## Post 9 by @rjackson — 2016-12-02T15:41:54Z

Thanks so much!

Looking at your code, I realize I messed up something with my lint in the process of trying to get things going.

While trying to turn off rules I apparently turned on extra rules. Specifically preventing console.log().