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

sage
1

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.

2

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

Another example: Import WOW.js not working correctly with sage 9

3

Thanks

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

4

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
5

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",

6

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.

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?

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.

7

Here’s how I got it working:

  1. npm install --save hoverintent
    [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
  },
};
1 Like
8

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.

9

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