How to import Jquery RateYo?

Question

I'm trying to import Jquery Rateyo into my project, but it seems to not work. Here's the code

import $ from "jquery";
import rateYo from "rateyo";

class Rating {
  constructor() {
    $(function() {
      $("#rateYo").rateYo({
        rating: 1.5,
        starWidth: "40px",
        numStars: 5,
        halfStar: true
      });
    });
  }
}

export default Rating;

I'm using webpack as well.

It does not show in the UI. And also generates an error saying,

jquery.js?1157:3841 jQuery.Deferred exception: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).rateYo is not a function TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).rateYo is not a function at HTMLDocument.eval (webpack-internal:///./js/modules/Rating.js:12:64) at mightThrow (webpack-internal:///./node_modules/jquery/dist/jquery.js:3557:29) at process (webpack-internal:///./node_modules/jquery/dist/jquery.js:3625:12) undefined

Answer 1

you need to use jquery version of the module @rateyo/jquery

and you can do the following.

import $ from "jquery";
import "@rateyo/jquery";

$("#rateyo").rateYo();

BTW rateyo expects jquery >= 3.0.0

Answer 2

Two things I would check. If the rateyo is in you package.json and if it has the folder in node_modules.

Another thing the import should be just:

import 'rateyo';