Search code examples
javascriptjqueryrequirejssurveyjs

Undefined error while loading SurveyJS using RequireJS


I am trying to run the simple survey using SurveyJS and it is not getting loaded by requireJS. There is no error on loading, but it is undefined inside the define function's body.

I have tried to use shim's exports property, however the result was the same.

What possibly am I doing wrong?

index.js

requirejs.config({
  paths: {
    app: "./",
    jquery: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min',
    Survey: "https://unpkg.com/[email protected]/survey.jquery.min",
  },
  shim: {
    Survey: {
      deps: ['jquery'],
    }
  }
});

requirejs(["main"]);

main.js

define(["Survey"], function (Survey) {
  console.log(Survey); // undefined
});

index.html


<head>
    <script data-main="index" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
    <link href="index.css" rel="stylesheet" />

<link href="https://unpkg.com/[email protected]/modern.css" type="text/css" rel="stylesheet"/>
</head>

Solution

  • Turns out, that each module can have their own name inside the library. For SurveyJS it is survey-jquery. And it does not require the usage of shim part of requirejs.

    Had to look at the library's beginning part where it defines it. Also, it requires jQuery to be defined as jquery.

    function webpackUniversalModuleDefinition(root, factory) {
        if(typeof exports === 'object' && typeof module === 'object')
            module.exports = factory(require("jquery"));
        else if(typeof define === 'function' && define.amd)
            define("survey-jquery", ["jquery"], factory);
        else if(typeof exports === 'object')
            exports["survey-jquery"] = factory(require("jquery"));
        else
            root["Survey"] = factory(root["jQuery"]);
    }
    

    Changed index.js as below

    require.config({
      paths: {
        app: "./",
        jquery: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min',
        'survey-jquery': "https://unpkg.com/[email protected]/survey.jquery.min",
      },
    });
    

    As the imported module name has changed, so changed main.js

    define(["survey-jquery"], function (Survey) {
      console.log(Survey); // Module {...}
    });