Uncaught ReferenceError: Headroom is not defined

[visualasparagus]

I've been trying to implement headroom.js in a new project using jQuery. The version of headroom.js being used is 0.9.4 and was installed via yarn add headroom.js

However, I'm getting a JavaScript reference error Uncaught ReferenceError: Headroom is not defined. This error is happening in the jQuery.headroom.js file.

line 23: options = $.extend(true, {}, Headroom.options, options);

The import statements being used are

import 'headroom.js/dist/headroom.js';
import 'headroom.js/dist/jQuery.headroom.js';

My workaround for this has been to do the following. It doesn't seem like best practice though and perhaps the jQuery plugin should reference the global window scope?

import Headroom from 'headroom.js/dist/headroom.js';
window.Headroom = Headroom;
import 'headroom.js/dist/jQuery.headroom.js';

Any ideas or comments?

[bonlando]

i'm getting the same errors...same import statements...any ideas?

[drj8022]

you can change root.Headroom = factory() to window.Headroom = factory()

[WickyNilliams]

Hey, excuse the delay in reply!

I'm considering changing the jquery plugin to receive $ and Headroom as an arg, rather than assume them to be global.

So it would work something like this:

import $ from 'jquery';
import Headroom from 'headroom.js';
import registerPlugin 'headroom.js/dist/jQuery.headroom.js';


registerPlugin($, Headroom);

// then 
$("header").headroom();

How does this sound? It should fix the issues here. I may even choose to bundle Headroom with the jQuery plugin, so that you don't need to install/import Headroom separately.

[WickyNilliams]

My reason for doing this is that jQuery is technically a peer dep of the jQuery.headroom plugin. But I don't want to add it as a peer dep to the repo, as it will force people to install jquery even if they're not using the jquery plugin.

So my options are:

1. create separate repo for jquery plugin - have headroom as dependency, and jquery as peer dependency, then it's just a single import statement to get the plugin registered.
2. as in my previous comment

It seems like (2) is the best option

[hacknug]

What exactly are the benefits of using the jQuery version vs vanilla? New repo just for that sounds like more work than necessary to solve this.

[WickyNilliams]

Good point, there was another option:

3. drop plugin completely and recommend use of vanilla headroom

Which is actually quite attractive. Same (or even especially) for angular. I don't use angular and never have. And from the issues it seems like that has never quite worked right

[WickyNilliams]

This will be dealt with via #140