Adrian0012

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?