Looking for an example of a hex package that includes a jQuery plugin

Hey all!

Can anyone please provide me an example of a working hex library that includes a javascript jquery plugin?

I’ve been trying to develop a hex library that includes a whole bunch of JavaScript, and have been running into a few specific problems.

Here’s the library:

And here’s my phoenix app.js:

import css from "../css/app.scss"

import $ from "jquery"

window.jQuery = $
window.$ = $

import "bootstrap"
import "phoenix_html"

import "ex_effective_bootstrap"

So in the library, I import and use “bootstrap-select.min” and “jquery.maskedInput.js” and initialize these on $(document.ready() from inside the library.

This is run when I do `import “ex_effective_bootstrap”. It works great the first time. The jquery plugins are run. I get the expected result – fancy form fields.

What I do not get, is the ability to call .selectpicker() or .mask() on the window.$ in the browser.

Similarly, I can create events inside the hex library with the $(document).on 'my-custom-trigger', function(event) {} syntax. But then I run $(document).trigger('my-custom-trigger') in the browser, the events are not triggered. This once again leads me to believe that I have like two instances of jQuery going on.

I have explored all kinds of webpack providePlugin, exports, require vs include, using const, globals, expose-loader and other webpack plugins without any success.

Please I’d love to see a working example

Any help would be much appreciated :slight_smile:

Sounds like they aren’t pointing to the right deps directory, like how the phoenix javascript points to inside deps/phoenix...?