Requiring jquery-sticky in webpack not working

[martinwittmann]

When using require('jquery-sticky); in webpack jquery-sticky does not attach to the global jquery object.

Did I miss something or is this broken? (I tried the solutions in the accepted answer of https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack without success)

[martinwittmann]

The Problem seems to be that the plugin relies on the global jquery variable $ to function properly and that it gets an instance of jQuery but not the global. So it binds itself not to the global jQuery object and is therefore not available there.

[martinwittmann]

I found a workaround with expose-loader: require("expose-loader?$!jquery"); When including this snippet before requiring jquery-sticky it works.

[AndreasHart]

Any chance you could elaborate? @martinwittmann. I'm doing a migration to Webpack from Browserify on a Rails app and am blocked by jquery-sticky. Im trying to import jquery using providePlugin from webpack. but cannot get the sticky function at attach to the jquery object.

Basically this stack overflow.. https://stackoverflow.com/questions/45998003/how-to-use-jquery-with-rails-webpacker-3

Thanks in advance.

[joemasilotti]

@martinwittmann, I was able to get jQuery and this library to work with the following:

$ yarn add jquery-sticky

# environment.js
const { environment } = require("@rails/webpacker")
const webpack = require("webpack")

environment.plugins.prepend(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    sticky: "sticky",
  })
)

const config = environment.toWebpackConfig()

config.resolve.alias = {
  jquery: "jquery/src/jquery",
  sticky: "jquery-sticky/jquery.sticky",
}

module.exports = environment

# application.js
import {} from "sticky"