All threads / Having trouble setting up Bootstrap + jQuery + easyAutocomplete in Rails 6

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Having trouble setting up Bootstrap + jQuery + easyAutocomplete in Rails 6

Adrian0012 asked in Rails

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?

Did you ever have any luck with this? I'm having a similar problem.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 35,699+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.