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