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

Reply

@chris OliverOliverOliverOliverOliverOliveOliverOlive

Reply

i'm facing the same issue

Reply
Join the discussion
Create an account Log in

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

Join 83,168+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.