Importing 3rd Party Packages with Sage 9

sage
1

Hi Everyone,

I’m currently using Sage 9 beta 2 for building a new theme and I am running into something I am not sure how to tackle. I’m trying to add a third-party JS library and according to this doc it’s just a matter of yarn add <package> and import it into your main, which I did.

However after running yarn run build there suppose to be a _/node_modules/ maps in my dist but there’s none. And going through the scripts folder in my dist, I notice that the third-party library has been imported into the main.js dist file. But for some reason, the inspect browser console states that it’s unable to find the class/function. Is there something I’m missing here?

2 Likes
2

Please post the name of the package and the actual code you’ve tried.

1 Like
3

My bad, forgot the package indeed. I installed headroom.js using yarn add headroom.js in this case.

in Main.js

/** import external dependencies */
import 'jquery';
import 'bootstrap';
import 'headroom.js/dist/headroom.min';
import 'headroom.js/dist/jQuery.headroom.min'

in Common.js

$("#menu-main").headroom();

With a CDN this works but I was hoping to install the package using Sage

1 Like
4

Headroom specifically caused me problems, too, and I just gave up. If there’s a way to make this work I’ll be eager to hear it, too.

5

I got it to work with a CDN as an alternative, but obviously this should work using the package manager sage uses.

6

Works if you import it in Common.js

import Headroom from 'headroom.js/dist/headroom.min';

and then initiate it with pure js

let navbar = document.getElementById('navbar-top');
let headroom = new Headroom(navbar);
headroom.init();
6 Likes
7

Thank you very much, I’ve been trying to get this working for longer than I’d like to admit. To note: the error I had been receiving: 'Headroom' is not defined.

Can anyone explain why importing the package into main.js doesn’t work? I find things like this to be super frustrating. Why would some packages like jQuery be called in main.js but not this particular case? Any hints or documentation you could point me to would be awesome.

Thanks so much.

8

Headroom.js definitely makes me want to scream a little.

I’ve used at least a couple dozen different packages working on client sites with Sage 9 and Headroom.js is the only one I’ve had an issue with.

The jQuery extension just does not seem to play nice with webpack. I’m guessing this is semi-related.

In any case, @KimH’s solution did the trick.

Here’s an example using querySelector instead for a bit more control over the selector (similar to jQuery):

import Headroom from 'headroom.js/dist/headroom';

$(function() {
  let header = document.querySelector('header.banner');
  let headroom = new Headroom(header, {
    'offset': 205,
    'tolerance': 5,
    'classes': {
      'initial': 'animated',
      'pinned': 'slideDown',
      'unpinned': 'slideUp',
    },
  });
  headroom.init();
});

Please note that querySelector has less browser support than getElementById though.

4 Likes
9

I’m having the same issue, with another package (https://github.com/sjhewitt/glitch.js/)
and also happened before with another package I just gave up. (https://github.com/snaptortoise/konami-js)

what’s the correct way to do it?

10

I just want to say thank you to you. You save my life :slight_smile:

2 Likes
11

Same problem here, i’m trying to get Barba works but I get not defined.
Did anyone solve it somehow?

12

Please post the actual code you’ve tried

13

Actually I think I found something useful about Barba here on the forum :slight_smile: