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/jquery@3.6.0/dist/jquery.min',
Survey: "https://unpkg.com/survey-jquery@1.9.40/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/survey-jquery@1.9.40/modern.css" type="text/css" rel="stylesheet"/>
</head>
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/jquery@3.6.0/dist/jquery.min',
'survey-jquery': "https://unpkg.com/survey-jquery@1.9.40/survey.jquery.min",
},
});
As the imported module name has changed, so changed main.js
define(["survey-jquery"], function (Survey) {
console.log(Survey); // Module {...}
});