I am trying to combine two require amd modules into one combined.js javascript file using RequireJS optimizer.
**This question is not the same than this one: Mismatched anonymous define() module where there is not a solution or detailed explanation of the issues, and there are some contradictory advises with the reactJS documentation.
module1.js
//module1.js - objectTest1
(function (root, factory) {
'use strict';
//Universal Module Definition
if (typeof define === 'function' && define.amd) {
// AMD
define(factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
}(this, function () {
'use strict';
return function objectTest1() {
var test = '1';
return test;
}
}));
module2.js
//module2.js - objectTest2
(function (root, factory) {
'use strict';
//Universal Module Definition
if (typeof define === 'function' && define.amd) {
// AMD
define(factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
}(this, function () {
'use strict';
return function objectTest2() {
var test = '2';
return test;
}
}));
Recommended good practice
In requireJS wiki and other sources, as a good practice, they explicitly recommend not to set a name for each module, but instead leave it anonymous without an id: https://github.com/requirejs/requirejs/wiki/Updating-existing-libraries#anon
"Normally you should not register a named module, but instead register as an anonymous module..."
RequireJS optimizer - Combining the modules in one js file
[build.js]
({
baseUrl: ".",
paths: {
"module1": "module1.js",
"module2":"module2.js"
},
name: "definition",
out: "combined.js"
})
[definition.js]
require(["module1", "module2"], function (objectTest1, objectTest2) {
});
[Ejecute requireJS optimizer]
./node_modules/requirejs/bin/r.js -o build.js optimize=none
RequireJS optimizer - Output - combined.js
(function (root, factory) {
'use strict';
//Universal Module Definition
if (typeof define === 'function' && define.amd) {
// AMD
define(factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
}(this, function () {
'use strict';
return function objectTest1() {
var test = '1';
return test;
}
}));
define("module1", function(){});
(function (root, factory) {
'use strict';
//Universal Module Definition
if (typeof define === 'function' && define.amd) {
// AMD
define(factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
}(this, function () {
'use strict';
return function objectTest2() {
var test = '2';
return test;
}
}));
define("module2", function(){});
require(["module1", "module2"], function (objectTest1, objectTest2) {
});
define("combined_name", function(){});
Trying to load combined.js file and modules
[index.html]
require(["combined_name"],
function (combined_name, objectTest1, objectTest2) {
//combined_name = undefined
//one of the objects is found, the other is undefined (error)
}
);
Problem
When loading the combined.js file, I am getting always the same error unless I specify an id name for each one of the modules above with the code: define('module1', factory); ...
Error:
Uncaught Error: Mismatched anonymous define() module: function () {
'use strict';
return function objectTest1() {
Additional information
- All files are currently loading perfectly with requireJS with that UMD pattern. However I do not know if something should be changed.
- The definition.js and combined.js are explicitly loading modules with a defined id name for each module. The problem may be here.
Questions
- How can I combine those anonymous modules in one combined.js file, load that file with requireJS and then get the modules?
- Could it be something wrong in the code?
- In the requireJS Optimizer documentation, they say they support loading anonymous modules, but I have not been able to do it. Is it really possible to do it without assigning a id name to the modules?
I am getting totally desesperate trying to solve it and already looked through many resources but could not find a clear answer. Thanks a lot