Question T7489
Visible to All Users

Getting this.survey is null when trying to load survey

created 4 years ago

We've been successfully using SurveyJS in one app for several months now. We are now setting up a second app that also needs a survey engine and are having lots of problems getting the surveys to come up in the new app.

We are doing this in Vue. The original app is a standalone Vue app and then it talks to a .NET Core service that acts as a controller and makes all the calls to the other services we have that it needs. The main one being hitting our Survey service as we already had a database with survey questions. The services pulls survey questions, converts it to the necessary SurveyJS JSON, and gives it to the page to load. The view page makes the API call and then passes the JSON into a component where the Survey.Model call is actually called and then shown on the page.

The new app is still Vue, but is combined together with a .NET Core backend in the same project. A coworker on another team had suggested that model. It is making our service calls a bit easier. While I don't think there should be anything about that project structure that should affect SuveyJS, I can't dismiss it. I did update the original app so that they are using the same version of SurveyJS to eliminate that variable. The new app is on 1.8.59. I moved the original one from 1.8.21 to 1.8.59.

I'm following the same structure of a Vue view page and component from our original app, but I keep getting Javascript errors in the console. I've got those listed below. Because of that, it is not loading the survey. Just trying to get things working, so I've been trying it with both assigning the JSON from the API call and just hard-coding it into a variable.

I have also done a standalone page where I followed the steps for setting up your page with SurveyJS. It will pull up and display the survey. That is until I make an API call using an await anywhere before the Survey.Model line. The call doesn't even have to be related to pulling the survey information or using the variable the results are assigned to. I'm attaching a stripped down page that hopefully will allow you to recreate what I am seeing. Since you wouldn't have my service calls, I pasted in a call to get EU countries that I saw in one of your examples. I haven't been able to get CORS set up quite right, so it is blocking that call for me, so I don't know if the syntax is quite right.

When I look in the JavaScript console, I see the errors when the survey does not load. Firefox gives the slightly more descriptive error of "this.survey is null". Chrome's is a little more cryptic, but it does give a line number in survey-vue.js and it is where it is trying to access this.survey.css. Attaching screenshots of both.

[Firefox]
[Vue warn]: Error in render: "TypeError: this.survey is null"

[Chrome]
[Vue warn]: Error in render: "TypeError: Cannot read property 'css' of null"

It is not giving me much to work on for debugging. I hope that something like this has come up before and you can point me in the right direction. The console shows the TypeError first, before any of my console.log statements, so it may be some sort of timing issue.

Answers approved by surveyjs Support

created 4 years ago

Hello Mike,
I suggest to create survey without JSON this.survey = new Survey.Model(); in constructor and then load it as:
this.survey.fromJSON(surveyJSON1);.

Thank you,
Andrew
SurveyJS Team

    Other Answers

    created 4 years ago

    Thanks. I tried it out, but it did not seem to make a difference. On the standalone page, it is still hitting the survey null error if I try to do the API call first. It's not too critical as this will mainly be a testing page where we manually set the JSON to debug or test out new features.

    I did, however, get our main page that has a component where the survey is actually called from. I just happened to paste everything from the standalone page into the component and tried it. And it started working. The difference was how we were calling things to set up the page. In our original app, it uses the mounted() lifecycle hook in Vue. So, that is what I was doing here as well. When I switched it over to use created(), it started working in the new app. I have absolutely no idea why the behavior is different between the two apps. But I finally got past the sticking point and the survey is reading from the database, transforming to your SurveyJS format, and displaying on the page.

      Comments (2)

        Hello,

        But I finally got past the sticking point and the survey is reading from the database, transforming to your SurveyJS format, and displaying on the page.

        Am I right that you've overcame the issue?

        Thanks, Serge
        SurveyJS Team

          Yes, I have. It is working now. Thank you.