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?

Reply

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

Reply

Me too, same situation here, anyone fixed this issue?

Reply
Join the discussion
Create an account Log in

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

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

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