Adrian0012

Joined

50 Experience
0 Lessons Completed
0 Questions Solved

Activity

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?

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.