How to use custom jQuery in Rails 6

Joan Gabun October 14, 2019 12:01pm

I've been thinking about this for a couple of days already.

For some reason my semantic-ui jQuery doesn't work.

So here's what I did.

On my webpack/environment.js:


const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}))

module.exports = environment

I added a custom.js file with the following codes under app/javascripts/packs:

$(document).on('turbolinks:load', function(){
    $('.ui.dropdown').dropdown();
})

And then inside of my application.js w/c is under app/javascripts/packs I have the ff:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("packs/custom")

On chrome console here's what I see:


Uncaught TypeError: $(...).dropdown is not a function
    at HTMLDocument.<anonymous> (custom.js:3)
    at HTMLDocument.dispatch (jquery.js:4588)
    at HTMLDocument.elemData.handle (jquery.js:4408)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

I thought I did it right but for some reason this solution did not work at all.
Any idea what am I doing wrong?