All threads / TypeError: $(...).chosen is not a function

Ask A Question

Notifications

You’re not receiving notifications from this thread.

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

Vikram Sharma asked in General

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://[email protected]:harvesthq/chosen.git#7149a2aed86d4d815f1497f27ae602ed898b9b02

which outputted

yarn add v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "[email protected]^4.0.0".
warning "webpack-dev-server > [email protected]" has unmet peer dependency "[email protected]^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
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

Join the discussion

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

Join 37,106+ 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.