Mismatched Anonymous Define() Module

Mismatched anonymous define() module

Like AlienWebguy said, per the docs, require.js can blow up if

• 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)

Uncaught Error: Mismatched anonymous define() module: function definition(name, global)

UPDATE

After checking the docs - this is actually the first error they discuss:

"If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur."

So make sure the only <script> tag (at least for any scripts which call define()) in your index.html is the one to requirejs.

END UPDATE

You need to pass in parameters to your function() like so:

define([
'jquery',
'underscore',
'backbone'
],function(jquery, underscore, backbone){
subAccountRouter = Backbone.Router.extend({
  routes: {
  // Defining the routes
    'sub-accounts': 'subAccountList',
    '*actions': 'defaultAction'
  },
});

I wrote a super-simple post on setting up requirejs recently, if you're still stuck.

Uncaught Error: Mismatched anonymous define() module: function in karma and jasmine unit testing with requirejs

Here is your karma.conf.js file I've edited to make possible run with RequireJS. Comments styled as // -- mostly (except when trailing) the stuff that I commented out, and styled as /* */ -- are real comments about what's the purpose of specific line presence or absence. I hope all that commenting will help to understand what's going on.

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine','requirejs'],

    files: [
        /* not needed because you've told to use requirejs higher in frameworks */
//        'node_modules/requirejs/require.js',

        /* i assume this one in no need in your case but could be yes */
//        'node_modules/karma-requirejs/lib/adapter.js',

        /* as far as i understand angular.js is amd loadable so don't load it directly */
//        'node_modules/angular/angular.js',

        /* i am not sure about this one and how it should be launched so commented it out for now */
//        'node_modules/angular-mocks/angular-mocks.js',

        /* will be loaded by tests*/
//        'public/app/app.js',

        /* tests should not be loaded directly eigther */
//        'public/tests/spec.js'

        /* now configure karma with what will be servable */
        {pattern: 'node_modules/**/*.js', included: false}, // all stuff from what npm installed
        {pattern: 'src/**/*.js', included: false}, // your source filed
        {pattern: 'tests/**/*Test.js', included: false},    // your tests or specs

        /* this is the only file to be loaded directly */
        'tests/test-main.js' // karma will load this file and it will do all the stuff
     ],

    exclude: [
    ],

    /* karma will load all sibling npm modules with name karma-* so these lines not needed i believe */
//    plugins: [
//        'karma-requirejs',
//        'karma-chrome-launcher',
//        'karma-jasmine'
//    ],
    preprocessors: {
    },
    reporters: ['progress'],

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

Then here I made a sample code for main-test.js file.

var allTestFiles = [];
var TEST_REGEXP = /base\/tests\/.*(spec|test)\.js$/i;

// Get a list of all the test files to include
/* as far as i remember window.__karma__.files contains array of all servable files */
Object.keys(window.__karma__.files).forEach(function (file) {
    //console.log('original path', file);
    if (TEST_REGEXP.test(file)) {
        /* below i commented out file path modification suggested at http://karma-runner.github.io/1.0/plus/requirejs.html
         * personally i never needed that. Your case might be different so you can play around with this part
         */
        var normalizedTestModule = file;//'/base/' + file.replace(/^\/base\/|\.js$/g, '')
        //console.log('normalized path', normalizedTestModule);
        allTestFiles.push(normalizedTestModule);
    }
});

//console.log(allTestFiles); // list all test filed that will be run

/* now confifure requirejs so it could do the job 
 * for more details please visit http://requirejs.org/docs/api.html#config
 */
require.config({
    // Karma serves files under /base, which is the basePath from your config file
    /* i prefer this to be default */
    baseUrl: '/base/src',
    paths: {
        /* could be this to do stuff like
         * define(['node_modules/cool-module/module.js], function(Module){
         * 
         * });
         */
        node_modules: '/base/node_modules',

        /* below is just examples that what it could be if you needed those */
//        jquery: '/base/node_modules/jquery/dist/jquery',
//        underscore: '/base/node_modules/underscore/underscore',
//        backbone: '/base/node_modules/backbone/backbone',
//        text: '/base/node_modules/requirejs-text/text',
//        templates: '/base/src/templates'
    },

    /* Dynamically load all test files
     * An array of dependencies to load. Useful when require is defined as a 
     * config object before require.js is loaded, and you want to specify 
     * dependencies to load as soon as require() is defined. Using deps 
     * is just like doing a require([]) call, but done as soon as the loader 
     * has processed the configuration. It does not block any other require() 
     * calls from starting their requests for modules, it is just a way to 
     * specify some modules to load asynchronously as part of a config block.
     * (http://requirejs.org/docs/api.html#config-deps)
     */
    deps: allTestFiles,

    /*  A function to execute after deps have been loaded. Useful when require 
     * is defined as a config object before require.js is loaded, and you want 
     * to specify a function to require after the configuration's deps array 
     * has been loaded.
     * http://requirejs.org/docs/api.html#config-callback
     * Could be as simple as 
     *     callback: window.__karma__.start
     * but i do it via additional wrapper so i can require something specific 
     * for the whole test suite (like jasmine-jquery), you will the sample below
     */
    callback: startTestWithJasmineJquery
});

function startTestWithJasmineJquery(){
    require(['node_modules/jasmine-jquery/lib/jasmine-jquery'], function(){
        /* now jasmine-jquery is loaded and its features are available
         * so we can window.__karma__.start -- it will actually run tests
         */
        window.__karma__.start();
    });
}

Please note that all config options assume folder and some specific files structure as:

node_modules/
src/
tests/
    test-main.js
karma-conf.js

Please also note again that this is very basic config I've provided and there might be some specific stuff relative to angular or your project logic and needs and thus there might be some (or many) changes to be made.

requireJS - Mismatched anonymous define() module in multipage shim

Answer was this, hopefully it helps someone:

Given this was a big platform, lots of other stuff was being loaded outside of the require flow (we're slowly transitioning).

Some of these assets, i.e. jquery 1.10, spin.js, etc., were compatible with AMD, and were calling define(). In the spin.js case, it was calling define() anonymously, which was tripping up the loading as is explained in the second point of the Mismatched Anonymous error in the resolve docs.

Good grief.

---

Related Topics