The `survey-react` gives an error with `this.addEvent`

Question

I inherited a react project and I can't figure out how to use survey-react module. I keep getting this error at http://localhost:3000/

Uncaught TypeError: this.addEvent is not a function
node_modules/survey-react/survey.react.js:2582

  2579 |  * options.newValue - new value.
  2580 |  */
  2581 | 
> 2582 | this.onPropertyChanged = this.addEvent();
       | ^  2583 | /**
  2584 |  * Event that raised on changing property of the ItemValue object.
  2585 |  * sender - the object that owns the property

I simplified my project to just 3 files, which are:

This is my src/index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import * as Survey from 'survey-react';
const questions = {
  elements:[{"type":"comment","name":"If you could enhance one thing about this product, what would it be?","isRequired":true}]
};
const srv = Survey.Model(questions);
srv.data = {"If you could enhance one thing about this product, what would it be?":"I like it as is, no changes needed."};
ReactDOM.render(<Survey.Survey model={srv} />, document.getElementById('root'));

This is my package.json

{
  "name": "testingthis",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-jest": "^23.6.0",
    "react": "^16.6.1",
    "react-dom": "^16.4.2",
    "react-scripts": "^2.1.8",
    "survey-react": "1.9.33"
  },
  "scripts": {
    "start": "react-scripts start"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

This is my public/index.html

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
</html

What am I doing wrong?

score 1 · Answer 1 · answered Jul 08 '22 at 21:18

I can't find any documentation on the survey-react package, but the official docs on the SurveyJS site say you should use the survey-core and survey-react-ui packages (https://surveyjs.io/Documentation/Library?id=get-started-react):

import { StylesManager, Model } from "survey-core";
import { Survey } from "survey-react-ui";

So either switch to those, or if you insist on using survey-react, you can get it working by changing your code like this:

import React from "react";
import ReactDOM from "react-dom";
import * as Survey from "survey-react";
const questions = {
  elements: [
    {
      type: "comment",
      name:
        "If you could enhance one thing about this product, what would it be?",
      isRequired: true
    }
  ]
};
const data = {
  "If you could enhance one thing about this product, what would it be?":
    "I like it as is, no changes needed."  
}

ReactDOM.render(<Survey.Survey json={questions}
   data={data} />, document.getElementById("root"));

score 0 · Accepted Answer · answered Jul 10 '22 at 14:19

I made a stupid typing mistake. I forgot the word new before the Survey.Model(...)

import React from 'react';
import ReactDOM from 'react-dom';
import * as Survey from 'survey-react';
const questions = {
  elements:[{"type":"comment","name":"If you could enhance one thing about this product, what would it be?","isRequired":true}]
};
const srv = new Survey.Model(questions);
srv.data = {"If you could enhance one thing about this product, what would it be?":"I like it as is, no changes needed."};
ReactDOM.render(<Survey.Survey model={srv} />, document.getElementById('root'));

The `survey-react` gives an error with `this.addEvent`

2 Answers2