50 Experience
0 Lessons Completed
0 Questions Solved


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")    
  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'    

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?

Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

© 2023 GoRails, LLC. All rights reserved.