Search code examples
javascriptreactjssurveyjs

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

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?

Solution

  • 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'));