Require JS script implementation issue

Question

I am trying to implement the SurveyJS library into my page but it doesn't seem to work at all and I keep getting "Survey is undefined" whenever I call the Survey object methods, as detailed in the official documentation: https://surveyjs.io/Examples/Library#content-js

The following is how I currently have things set up:

Vendor/Module/view/frontend/web/js/survey.js

here a snippet of the code where you can see the Survey object being defined:

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("jquery")):"function"==typeof define&&define.amd?define("Survey",["jquery"],t):"object"==typeof exports?exports.Survey=t

Vendor/Module/view/frontend/requirejs-config.js

var config = {
    paths: {
        "surveyJs": "Vendor_Module/js/survey"
    },
    shim: {
        "surveyJs": {
            "deps": ["jquery"]
        }
    }
}

Vendor/Module/view/frontend/templates/example.phtml

<script type="text/javascript">

    requirejs(['jquery','surveyJs'], function($, survey){
        Survey
            .StylesManager
            .applyTheme("modern");

        var json = {
            "completedHtml": "<h3>Thank you for your feedback.</h3> <h5>Your thoughts and ideas will help us to create a great product!</h5>",
            "completedHtmlOnCondition": [
                {
                    "expression": "{nps_score} > 8",
                    "html": "<h3>Thank you for your feedback.</h3> <h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>"
                }, {
                    "expression": "{nps_score} < 7",
                    "html": "<h3>Thank you for your feedback.</h3> <h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5><br/>"
                }
            ],
            "pages": [
                {
                    "name": "page1",
                    "elements": [
                        {
                            "type": "rating",
                            "name": "nps_score",
                            "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
                            "isRequired": true,
                            "rateMin": 0,
                            "rateMax": 10,
                            "minRateDescription": "(Most unlikely)",
                            "maxRateDescription": "(Most likely)"
                        }, {
                            "type": "checkbox",
                            "name": "promoter_features",
                            "visibleIf": "{nps_score} >= 9",
                            "title": "What features do you value the most?",
                            "isRequired": true,
                            "validators": [
                                {
                                    "type": "answercount",
                                    "text": "Please select two features maximum.",
                                    "maxCount": 2
                                }
                            ],
                            "hasOther": true,
                            "choices": [
                                "Performance", "Stability", "User Interface", "Complete Functionality"
                            ],
                            "otherText": "Other feature:",
                            "colCount": 2
                        }, {
                            "type": "comment",
                            "name": "passive_experience",
                            "visibleIf": "{nps_score} > 6  and {nps_score} < 9",
                            "title": "What is the primary reason for your score?"
                        }, {
                            "type": "comment",
                            "name": "disappointed_experience",
                            "visibleIf": "{nps_score} notempty",
                            "title": "What do you miss and what was disappointing in your experience with us?"
                        }
                    ]
                }
            ],
            "showQuestionNumbers": "off"
        };

        window.survey = new Survey.Model(json);

        survey
            .onComplete
            .add(function (result) {
                document
                    .querySelector('#surveyResult')
                    .textContent = "Result JSON:\n" + JSON.stringify(result.data, null, 3);
            });

        $("#surveyElement").Survey({model: survey});
    });
</script>

<div id="surveyElement" style="display:inline-block;width:100%;"></div>
<div id="surveyResult"></div>

When I test this, I get no alert but in the console it says Survey is not defined I have cleared my cache, sessions, regenerated the generated and pub/static files but nothing seems to work :( I can't help but think I may be missing something obvious here?

Thanks in advance for any help guys!

Answer 1

I was struggling with this same issue. I got it working after changing surveyJs - in your case - to Survey

var config = {
    paths: {
        "Survey": "Vendor_Module/js/survey"
    },
    shim: {
        "Survey": {
            "deps": ["jquery"]
        }
    }
}

and

requirejs(['jquery','Survey'], function($, Survey){