Skip to main content

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

General • Asked by Vikram Sharma

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 fsevents@1.2.8: 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
└─ chosen@1.8.7
info All dependencies
└─ chosen@1.8.7
Done in 158.62s.
In environment.js I added
  new webpack.ProvidePlugin ({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'],
    Chosen: ['chosen.js', 'default']

In my application.js I have

document.addEventListener("turbolinks:load", () => {

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 :)

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.