React barrating not display with modern theme

[RealSlimMahdi]

Hi, I try to implement barrating from the quick-start repo of yours, and I cannot manage to have it working when I use the modern template, this is the component:

import React, { Component } from "react";
import * as Survey from "survey-react";
import "survey-react/survey.css";
import SurveyCreator from "./SurveyCreator";
// import logo from "./logo.svg";
import "../../App.css";
import "bootstrap/dist/css/bootstrap.css";

import "jquery-ui/themes/base/all.css";
// import "nouislider/distribute/nouislider.css";
// import "select2/dist/css/select2.css";
// import "bootstrap-slider/dist/css/bootstrap-slider.css";
import "survey-react/modern.css";

import "jquery-bar-rating/dist/themes/css-stars.css";

import $ from "jquery";
import "jquery-ui/ui/widgets/datepicker.js";
import "select2/dist/js/select2.js";
import "jquery-bar-rating";

import * as SurveyCore from "survey-core";
// import * as SurveyPDF from "survey-pdf";
import * as widgets from "surveyjs-widgets";

import "pretty-checkbox/dist/pretty-checkbox.css";
import { API } from "aws-amplify";
import questions from "./questionJson";
//import "icheck/skins/square/blue.css";
window["$"] = window["jQuery"] = $;
//require("icheck");

const FeedbackSurvey = () => {
  Survey.StylesManager.applyTheme("modern");

  //widgets.icheck(Survey, $);
  widgets.prettycheckbox(Survey);
  widgets.select2(Survey, $);
  widgets.inputmask(Survey);
  widgets.jquerybarrating(Survey, $);
  widgets.jqueryuidatepicker(Survey, $);
  widgets.nouislider(Survey);
  widgets.select2tagbox(Survey, $);
  //widgets.signaturepad(Survey);
  widgets.sortablejs(Survey);
  widgets.ckeditor(Survey);
  widgets.autocomplete(Survey, $);
  widgets.bootstrapslider(Survey);

  //widgets.icheck(SurveyCore, $);
  widgets.prettycheckbox(SurveyCore);
  widgets.select2(SurveyCore, $);
  widgets.inputmask(SurveyCore);
  widgets.jquerybarrating(SurveyCore, $);
  widgets.jqueryuidatepicker(SurveyCore, $);
  widgets.nouislider(SurveyCore);
  widgets.select2tagbox(SurveyCore, $);
  //widgets.signaturepad(SurveyCore);
  widgets.sortablejs(SurveyCore);
  widgets.ckeditor(SurveyCore);
  widgets.autocomplete(SurveyCore, $);
  widgets.bootstrapslider(SurveyCore);

  const onValueChanged = (result) => {
    console.log("value changed!");
  };

  const onComplete = (result) => {
    console.log("Complete! " + JSON.stringify(result.data));

    // axios
    //   .post("/surveyfeedback", result.data)
    //   .then(function (response) {
    //     console.log(response);
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
    const myInit = {
      body: result.data, // replace this with attributes you need
      // headers: {
      //   Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}`,
      // }
    };

    API.post("apiecoav2", "/surveyfeedback", myInit)
      .then((response) => {
        console.log("Response received: ", response);
      })
      .catch((err) => {
        console.log("Error occured: ");
      });
  };

  const json = questions.questions;

  // const savePDF = (model) => {
  //   var surveyPDF = new SurveyPDF.SurveyPDF(json);
  //   surveyPDF.data = model.data;
  //   surveyPDF.save();
  // };

  const model = new Survey.Model(json);

  return (
    <div className="surveyjs">
      {/* <h1>eCOA Expert Squad Custumer Feedback</h1> */}

      <Survey.Survey model={model} onComplete={onComplete} onValueChanged={onValueChanged} />
      {/* <hr />
      <SurveyCreator /> */}
    </div>
  );
};

export default FeedbackSurvey;

and this is the json part of interest for the survey:

 {
            type: "barrating",
            name: "question3",
            title: "Overall Experience of working with me",
            description: "Would you recommend me",
            isRequired: true,
            choices: ["1", "2", "3", "4", "5"],
          },

[tsv2013]

Here is the live sample on our site - https://www.surveyjs.io/Examples/Library?id=custom-widget-barrating&platform=Reactjs&theme=modern and here is the live plunker sample - https://plnkr.co/edit/EahJt56xd9Yruxih

Do they work for you?

[RealSlimMahdi]

Yes, the live sample works, but once I switch to my local page, the Barrating disapears.

[tsv2013]

It looks like the issue can be somewhere in your code. If you create a live sample illustrating the issue, I could take a look.

[RealSlimMahdi]

When I clone your react repo the narrating star works: https://github.com/surveyjs/surveyjs_react_quickstart.git

But as soon as I switch to the newer version, there is no way to find from where comes the error.

This is the Html generated by the working code:

And the HTML generated by the faulty code:

and My package.json:

{
  "name": "ecoav2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^0.2.7",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@material-ui/core": "^4.10.0",
    "@material-ui/icons": "^4.9.1",
    "@reduxjs/toolkit": "^1.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "aws-amplify": "^3.0.13",
    "aws-amplify-react": "^4.1.12",
    "axios": "^0.19.2",
    "bootstrap": "3.3.7",
    "jquery": "3.3.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "survey-creator": "1.7.9",
    "survey-pdf": "1.7.9",
    "survey-react": "1.7.9",
    "surveyjs-widgets": "1.7.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[tsv2013]

Can you use the compatible version, that works ok?

[RealSlimMahdi]

Can you use the compatible version, that works ok?

Sorry but what is it ?

[tsv2013]

You wrote that

When I clone your react repo the narrating star works: https://github.com/surveyjs/surveyjs_react_quickstart.git

Am I right that that you have a working version?

But as soon as I switch to the newer version, there is no way to find from where comes the error.

And am I right that you've got an error after switching to the newer version? What is the library you switching the version of? What is the certain version that causes the error? Can you use the version that works ok?

[Buffalonian]

Even in 2022 I see this same issue.

[ST-1580]

I've tested the react-app. Everything works fine

In the file makes these changes: 1) Add following line in the file:

import "survey-core/modern.css";

2) Change defaultV2 theme to modern in the StylesManager

Survey.StylesManager.applyTheme("modern");