dollarshaveclub / stickybits

Stickybits is a lightweight alternative to `position: sticky` polyfills 🍬
https://github.com/yowainwright/stickybits
MIT License
2.19k stars 167 forks source link

Using stickybits.js with webpack 4 #615

Closed khoipro closed 4 years ago

khoipro commented 4 years ago

Hi,

Sorry for not following a template. I just want to share with you some tips for working with Webpack.

I recently work with a project which used GulpJS, and need to be convert to Webpack 4.

So I found a bug "stickybits is not a function" when calling var stickybits = require('stickybits')

A solution to call it successfully:

var stickybits = require('stickybits/dist/stickybits')

function PostShare(el) {
  this.header = document.querySelector('.header')
  if (this.header) {
    stickybits(el, {
      stickyBitStickyOffset: this.header.offsetHeight + 10
    })
  }
}

module.exports = PostShare

Hope it should be add to Wikis and help other save a day!

DanielRuf commented 4 years ago

Hi @khoipro,

this is mentioned here:

https://github.com/dollarshaveclub/stickybits#setup

Setup

Add dist/stickybits.min.js

Or as a module with import stickybits from 'stickybits'

It seems in your case the module entry is used which seems to be a misconfiguration.

https://github.com/dollarshaveclub/stickybits/blob/master/package.json#L6