Sticky is not a constructor

[Bobz-zg]

__WEBPACK_IMPORTED_MODULE_3_waypoints_lib_jquery_waypoints_min___default.a.Sticky is not a constructor

when using like:

import Waypoint from 'waypoints/lib/jquery.waypoints.min';
import Sticky from 'waypoints/lib/shortcuts/sticky.min';

new Waypoint.Sticky({
	element: $('.home .logo')[0],
});

Any advice about how to use shortcuts with webpack?

[vincentorback]

I don’t think Waypoint works as a ES6 module yet. You might have to import the scripts as globals like:

import 'waypoints/lib/jquery.waypoints.min'
import 'waypoints/lib/shortcuts/sticky.min'

new Waypoint.Sticky({
  element: $('.home .logo')[0]
})

[pandabrand]

I'm not using ES6 and also having this issue. Importing via bower.

[sroberson]

Doesn't work with the inview, either:

import "waypoints/lib/noframework.waypoints.js";
import "waypoints/lib/shortcuts/inview";

[ndq11]

Works for me:

import waypoint from 'waypoints/lib/jquery.waypoints.min';
import inview from 'waypoints/lib/shortcuts/inview';

[janwidmer]

I managed to make it work like this using Webpack 4.x:

1. Define Waypoints base library as Webpack External:

webpackConfig.externals =  {
        jquery: 'jQuery',
	'waypoints/lib/jquery.waypoints': 'jQuery.fn.waypoint', // needed to make sticky / inview shortcuts work
}

2. Load Waypoints base library before my vendors.js

3. initialise like this:

import 'waypoints/lib/jquery.waypoints';
import 'waypoints/lib/shortcuts/inview.min.js';

new Waypoint.Inview({
	element: $myElement,
	entered: () => {},
	exit: () => {},
});