Survey containing matrix question makes page unresponsive (stuck on loading)

[chesterlaykin]

Hi!
I have an issue where I am using survey-vue and have been able to load a survey so that it shows. But - if it contains a "matrix" question, the page gets stuck on loading and it becomes unresponsive.

I tried to recreate the problem on codesandbox, but there was no error there https://codesandbox.io/s/survey-vue-tests-mqx1e

So I tried to change my app to make it as similar as I could to my sandbox, but the problem persists. My app is not based on vue-cli, it loads a laravel template with vue inside.

I tried both passing in the data by setting a prop, and directly into the survey component (from the app() method), and the page crashes using both ways.
The survey-vue component also gives two warnings: $attrs is readonly" and "$listeners is readonly" (regardless if containing matrix question). The error points to the file: jsonobjects.ts , 732: private addPropertyToClass. (These warnings only show in the laravel app, not in my vue-cli test). If I inspect with vue-devtools in the test sandbox, I can see the Survey component and its children (SurveyString, SurveyPage), but in the laravel app those components don't show in the devtools - I can only see the Survey component,

But other question types for example "checkbox" and text field don't cause this page crash.
Do you have any insight regarding this problem?

Update: I made a new test laravel project with just one blade template, and simplified vue to just one component. The problem is still there. You can download/see code here https://github.com/chesterlaykin/surveyvue-failure-test.git

[tsv2013]

This look like a laravel project. As far as I understand this is a server-side PHP framework. But SurveyJS is a client side library. And SurveyJS issues should be reproducable without server code. If you provide a minimal client-side sample (https://stackoverflow.com/help/minimal-reproducible-example) we'll take a look.

[matrad]

I've the same problem on the most current vuejs-version.
Do you have any solution? @chesterlaykin did you resolved this problem?

Reproduced with 1.8.38 surveyjs-vue

PS: I can also reproduce this when compiling the surveyjs-vue via webpack (laravel), when including the already compiled surveyjs-vue-template from the cdn it works....

[chesterlaykin]

@matrad Hello, no I just excluded "matrix" to avoid the problem.

[tsv2013]

I've upgraded this repo up to the vue-cli v3. Can you check whether the issue still reproducible?

[chesterlaykin]

@matrad, @tsv2013 Hello, I have been checking this issue, and there seemed to be some problem with my lockfile.
After deleting the lockfile and reinstalling node modules I got some other error , probably unrelated (missing 'fs' dependency which required a webpack fix), but after fixing that it works!

But it wasn't just a one time occurence since my testproject also had this problem, but when cloning a second version of it, the problem wasn't there, then going back to the first version and deleting node modules + lockfile made that version work too.

It might be something to do with webpack and laravel mix.
But I guess we can close it?

[tsv2013]

@chesterlaykin

I've upgraded this repo up to the vue-cli v3.

Project dependencies nave been dramatically changed. That's why I think it's ok that you removed node_modules folder and .lock file in order to re-install dependencies.

[chesterlaykin]

@tsv2013 So that change affects older versions as well? I use version 1.5.1. for survey-vue.
In that case it explains why it started to work.

[tsv2013]

@chesterlaykin What change are you talking aboout?

[chesterlaykin]

@tsv2013 The change you did with the project dependencies. It upgrades the dependencies for version 1.5.1?

By the way I tried version 1.8.39 for my project and got some error "required prop initialSurvey is undefined" (for "surveyPage") , so I set the version to 1.5.1 and reinstalled, and now there is no error (and matrix works)).

[tsv2013]

@chesterlaykin 1.5.1 a a very old version. We don't fix bugs in previous releases. We release new updates with bug fixes. Current version of this project uses SurveyJS libraries v1.8.39 and VueJS latest (something like 2.6)

[emersonthis]

I was having this same problem in a Rails 6 app that uses the webpacker gem to bundle Vue. Just like the OP described, this issue only happened when the Matrix question is included in the survey, but most of the other question types worked. I also see the $attrs is readonly and $listeners is readonly.

I deleted node_modules yarn.lock and re-ran yarn to rebuild the lock file. That fixed it.