How can I incorporate Chosen into my React project?

Viewed 2127

I want to use a jquery plugin Chosen in my project. I installed jQuery and Chosen via npm:

npm i jquery chosen-js -S

Both libraries are now in my node_modules folder. Unfortunately I keep getting an error: ReferenceError: jQuery is not defined when the app tries to compile.

Here is where I make a call to the Chosen library:

import React from "react";
import ReactDom from "react-dom";
import $ from "jquery";
import "chosen-js/chosen.css";
import "chosen-js/chosen.jquery.js";

class App extends React.Component {
  componentDidMount() {
    $(this.refs.list).chosen();
  }

  render() {
    return (
      <select ref="list">
        <option>vanilla</option>
        <option>chocolate</option>
        <option>strawberry</option>
      </select>
    );
  }
}

ReactDom.render(, document.getElementById("app"));

Here's a pic of the error: enter image description here

2 Answers

don't change sources, better write in your component

window.jQuery = require('jquery');

before chosen-js imports

Related