TypeError: $(...).chosen is not a function

I am using Rails 6. I have installed jQuery, Bootstrap, & Popper as explained in one of the videos and Bootstrap is working fine. Now I have to use Chosen jQuery plugin.

I installed it using Yarn

yarn add ssh://git@github.com:harvesthq/chosen.git#7149a2aed86d4d815f1497f27ae602ed898b9b02

which outputted

yarn add v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.8: The platform "linux" is incompatible with this module.
info "fsevents@1.2.8" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > webpack-dev-server@3.3.1" has unmet peer dependency "webpack@^4.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.6.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ chosen@1.8.7
info All dependencies
└─ chosen@1.8.7
Done in 158.62s.

In environment.js I added
environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin ({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'],
    Chosen: ['chosen.js', 'default']
  })
)

In my application.js I have

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
  $("#course_instructor_ids").chosen()
})

Which gives me the error (in web console)

TypeError: $(...).chosen is not a function[Learn More]

If I add the following to application.js

import chosen from "chosen"

I get

Error: Cannot find module 'chosen'

Any help will be life saving :)

@chris OliverOliverOliverOliverOliverOliveOliverOlive

i'm facing the same issue