Question T10385
Visible to All Users

survey-js/code-examples/get-started-library/vue/ doesnt work with Vue 3 + Webpack app

created 2 years ago

If we want to run above mentioned example with webpack, we get the following error:

7.20f33ed74093b152989d.js:7 Uncaught (in promise) TypeError: Class extends value undefined is not a constructor or null
at a (7.20f33ed74093b152989d.js:7:128838)
at 7.20f33ed74093b152989d.js:7:129436
at ./src/vue/base.ts (7.20f33ed74093b152989d.js:7:130521)
at n (7.20f33ed74093b152989d.js:1:1053342)
at ./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./src/vue/survey.vue?vue&type=script&lang=ts& (7.20f33ed74093b152989d.js:1:1185728)
at n (7.20f33ed74093b152989d.js:1:1053342)
at ./src/vue/survey.vue?vue&type=script&lang=ts& (7.20f33ed74093b152989d.js:7:234491)
at n (7.20f33ed74093b152989d.js:1:1053342)
at ./src/vue/survey.vue (7.20f33ed74093b152989d.js:7:234033)
at n (7.20f33ed74093b152989d.js:1:1053342

Wild guess would be a circular dependency.
Any idea how to run your example in a project with webpack?

Show previous comments (1)

    Hmm, that might be a bit difficult because it is a huge project for a shopify page. It might take us days to extract a minimal case.
    You can check the effect/error here (devtools console):
    https://cvi5cdabahjs2ho8-27732017249.shopifypreview.com/pages/survey
    Let me know if that helps, if not we will try to build a new project that leads to the issue.

      I created a Vue 2 + Webpack app from scratch and added the code from the Get Started tutorial, but still couldn't see the error. I'm attaching my project. Please see if you can reproduce the issue in it.

        Thanks, that is very helpful.
        I went ahead and enhanced the config a little bit with a minimal set of stuff we usually use. I feel the reason might be that we use Vue3.
        Pls check attached edited project of yours that shows that error emerging.
        Have you ever thought of updating your project to vue3 since your dependencies are quite outdated and upgrading from vue2 to vue3 is usually really easy.

        Answers approved by surveyjs Support

        created 2 years ago (modified 5 months ago)

        Unfortunately, SurveyJS does not support Vue 3 yet. We have it in our plans, but I can't give you any ETA. In the meantime, you can integrate the Knockout version into your Vue 3 application. Uninstall the survey-vue-ui package, install survey-knockout-ui, and use the following code to render the survey:

        HTML
        <template> <div id="survey" /> </template> <script> import "survey-core/defaultV2.min.css"; import { StylesManager } from "survey-core"; import { Survey } from 'survey-knockout-ui'; StylesManager.applyTheme("defaultV2"); const surveyJson = { // ... }; export default { mounted() { const survey = new Survey(surveyJson); survey.render("survey"); } }; </script>
          Show previous comments (1)

            Hello Matthias,
            Please use the following code:
            StylesManager.applyTheme("defaultV2");
            You can use "modern" but you need to load modern css in this case:
            import "survey-core/modern.min.css";

            Thank you,
            Andrew
            SurveyJS Team

              Hi,
              thanks for the answer.

              Code
              import 'survey-core/modern.min.css' import { StylesManager } from 'survey-core' StylesManager.applyTheme("modern")

              did the trick.
              Thank you very much!

                Hello,
                We are happy to hear that these recommendations helped.

                For the record: if you just get started with SurveyJS components, we would generally recommend that you proceed with the most recent defaultV2 theme. The following code demonstrates how to apply this theme:

                Code
                import 'survey-core/defaultV2.min.css' import { StylesManager } from 'survey-core' StylesManager.applyTheme("defaultV2");

                We'll update our docs with this recommendation. Thank you.
                Please feel free to contact us if you have any questions or require further assistance.

                P.S. We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.