I got this error while working on a project using swiper.js :
Error: Mismatched anonymous define() module: function (require) {…
Searching a little on google I found a thread on stack overflow telling that :
requireJS blows up when :
You have an anonymous define (“modules that call define() with no string ID“) in its own script tag (I assume actually they mean anywhere in global scope)
You have modules that have conflicting names
You use loader plugins or anonymous modules but don’t use require.js’s optimizer to bundle them
I had this problem while including bundles built with browserify alongside require.js modules. The solution was to either:
A. load the non-require.js standalone bundles in script tags before require.js is loaded, or
B. load them using require.js (instead of a script tag)
The problem on the project I’m working on is that I’m writing a standalone widget within a require.js environment with no access at all to any require.js code, this means impossible to load js files in script tags before require.js is loaded and impossible to load them using require.js.
But… wait, why do swiper.js has to support amd if I only need it as a standalone non-require.js bundle ?
Fortunately, at the bottom of the swiper.js plugin you can find these lines :
if (typeof(module) !== 'undefined'){
module.exports = window.Swiper;
} else if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict'; return window.Swiper;
});
}
