Having trouble setting up Bootstrap + jQuery + easyAutocomplete in Rails 6
I have been reading articles/forums and followed some guides on how to set it up however I'm still having trouble running bootstrap and jquery.
Installed bootstrap, jquery and easyAutocomplete via yarn, after this I have proceeded to set up my env.js to enable jquery.
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
In my application.js looks like this
import 'bootstrap'
import '../stylesheets/application'
import './popover'
import './carousel'
import 'easy-autocomplete'
import './autocomplete'
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
Before importing easy-autocomplete bootstrap and jquery works and loads fine. Can use custom scripts for carousel, etc however after I import easy-autocomplete everything breaks. It seems like jquery is not recognized anymore as my carousel and popover stop working and on top of that I get this following error in the console
Uncaught TypeError: $(...).easyAutocomplete is not a function at :1:12
Could somebody please give me some pointers on how to solve this problem?
