Survey-library: Typescript error: TypeError this.survey.doAfterRenderSurvey is not a function

Created on 24 Feb 2020 · 5Comments · Source: surveyjs/survey-library

Using the library with React + Typescript, the library throws an error from at Survey.componentDidMount (survey.react.js:23483) as Uncaught TypeError: this.survey.doAfterRenderSurvey is not a function

See codesandbox for example: https://codesandbox.io/s/zen-allen-52rn0?fontsize=14&hidenavigation=1&theme=dark

question

Source

michaelgriffithus

👍1

Most helpful comment

try using ReactSurveyModel;

import * as React from 'react';
import { Survey, ReactSurveyModel } from 'survey-react';
import surveyQuestions from './survey.json';

export const onComplete = (survey: ReactSurveyModel) => {
  console.log('Survey Results: ' + JSON.stringify(survey));
};
const model = new ReactSurveyModel(surveyQuestions);
export const SurveyB: React.FC = () => <Survey model={model} onComplete={onComplete} />;

tridentprosrv-idaho on 24 Mar 2020

👍2 👎1

All 5 comments

You need to use the new Survey.Model(json); as shown in our samples e.g. here - https://surveyjs.io/Examples/Library?id=real-nps&platform=Reactjs#content-js

tsv2013 on 25 Feb 2020

When I use new Survey.Model(json);, I get the error:
Property 'Model' does not exist on type 'typeof import(".../node_modules/survey-react/survey.react")'.
Any tipps on how to fix that?

Freshchris01 on 26 Feb 2020

👍2

Added //@ts-ignore to fix the issue. But still then the survey container states, that no page was found. Using a pure .js and not a .tsx component solved the issue for me.

Freshchris01 on 27 Feb 2020

try using ReactSurveyModel;

import * as React from 'react';
import { Survey, ReactSurveyModel } from 'survey-react';
import surveyQuestions from './survey.json';

export const onComplete = (survey: ReactSurveyModel) => {
  console.log('Survey Results: ' + JSON.stringify(survey));
};
const model = new ReactSurveyModel(surveyQuestions);
export const SurveyB: React.FC = () => <Survey model={model} onComplete={onComplete} />;

tridentprosrv-idaho on 24 Mar 2020

👍2 👎1

@tridentprosrv-idaho , your code is very helpful & I am able to fix my problem.