How do I use easyautocomplete in rails 6?

I tried adding it with yarn and through rails assets but nothings seems to work.

I added it with yarn add easy-automplete
my application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

window.Rails = Rails

import 'bootstrap'
import 'easy-autocomplete/dist/jquery.easy-autocomplete'
import "controllers"

require("trix")
require("@rails/actiontext")

my application.scss

//= require actiontext

@import 'bootstrap';
@import 'easy-autocomplete/dist/easy-autocomplete';
@import 'easy-autocomplete/dist/easy-autocomplete.themes';

I just get this error

Uncaught TypeError: $(...).easyAutocomplete is not a function at <anonymous>:1:12

thank you I think I got it now

@Christopher Did you ever manage to solve this? I've tried adding it and keep getting the TypeError you mentioned.

This is my application.js file:

require("@rails/ujs").start()
require("jquery/dist/jquery")
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap/dist/js/bootstrap")
require("easy-autocomplete/dist/jquery.easy-autocomplete")

import LocalTime from "local-time"
LocalTime.start()

require("trix")
require("@rails/actiontext")

$(document).on('ready turbolinks:load', function () {
    bsCustomFileInput.init();
    $('[data-toggle="tooltip"]').tooltip();
})

and my aplication.scss :

@import "bootstrap/scss/bootstrap";
@import "easy-autocomplete/dist/easy-autocomplete";

Any idea what I'm missing?

@Umar did you add jquery to your environment.js file? Something like,

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        'window.jQuery': 'jquery'
    })
)

I haven't done it exactly like that, but have it as below:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}))

module.exports = environment

Would that suffice? I should note that Bootstrap tooltips etc. all work just fine

Hello Umar, did you finally manage your issue ?