4

I have survey-vue (surveyJS) working well on dev, but when I attempt to deploy I get a maximum call stack size exceeded error when landing on a page with the survey component. I was thinking it's how I'm importing the plugin but I'm not sure.

plugins/survey-vue.js

import Vue from "vue";
import * as surveyVue from "survey-vue";

Vue.use(surveyVue);

nuxt.config.js

plugins: [
    ...
    {
      src: '~/plugins/survey-vue',
      mode: 'client'
    },
]

components/Survey.vue

<template>
  <div id="surveyElement" class="w-full inline-block">
      <survey :survey="surveyRender" />
  </div>
</template>

<script>
import * as surveyVue from "survey-vue";
export default {
  props: {
    json: {
      type: Object
    },
    results: {
      type: Object
    }
  },
  data() {
    const jsonSurvey = this.json;
    const survey = new surveyVue.Model(jsonSurvey);

    // style the survey 
    var myCss = {...};
    
    survey.onComplete.add(survey => {
      this.result = survey.data;
      this.sendResults()
    })

    survey.css = myCss
    return {
      surveyRender: survey,
      result: []
    }
  },
  methods: {
    sendResults () {
      this.$emit('resultCaptured', this.result)
    }
  },
  created () {

  }
}
</script>

pages/.vue

<template>
  <div class="flex flex-col justify-center mx-auto w-full md:w-1/2 px-4">
    <div class="w-auto mx-auto p-4 mt-12" v-if="surveyCreated">
      <client-only>
        <survey :json="json" :results="reportedSymptoms"></survey>
      </client-only>
    </div>
  </div>
</template>
....

Any insight here is appreciated. Have been trying to debug this for several days to no avail.

kissu
  • 40,416
  • 14
  • 65
  • 133
breezybri
  • 41
  • 3
  • This error usually comes from an infinite loop. – kissu Mar 05 '21 at 18:24
  • Fixed: I had called my component Survey.vue which is the same name reserved for the plugin's survey. Changed my component file to SurveyComponent.vue and it resolved. Thanks @kissu for getting the wheels turning – breezybri Mar 05 '21 at 18:33
  • Indeed, the Vue styleguide recommend to prefix all your components to avoid such collisions: https://vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended – kissu Mar 05 '21 at 18:44
  • Makes a lot of sense! – breezybri Mar 05 '21 at 19:22

1 Answers1

0

Fixed: I had called my component file Survey.vue which is the same name reserved for the plugin's instance of survey. Changed my component file to SurveyComponent.vue and it resolved. Thanks @kissu for getting the wheels turning

breezybri
  • 41
  • 3