RequireJS Uncaught Error: Mismatched anonymous define() module

Question

Using RequireJS with Backbone in a minimal app, I always get

Uncaught Error: Mismatched anonymous define() module

even though the app continues to work. Here it is: https://assets.site44.com/admin/

I'm including jQuery, underscore, backbone in index.html, since I want to shorten the define() boilerplate in each view/model.

https://assets.site44.com/admin/js/main.js consists of

 var l = console.log.bind(console)

var app
//l("AA")

require.config({
  paths: {
    // Major libraries
    /*jquery: 'libs/jquery/jquery-min',
    underscore: 'libs/underscore/underscore-min', // https://github.com/amdjs
    backbone: 'libs/backbone/backbone-min', // https://github.com/amdjs
*/
    // Require.js plugins
    text: 'text'

  }

})


function initApp() {
  console.log("BB")

  require([
    'views/AppView'
  ], function(AppView){
    l("CC")

    app = new AppView()
    $("#app").html(app.render())

  })
}

$(document).ready(initApp)

I cannot figure out the issue from docs or this answered question: Mismatched anonymous define() module

Thank you

Your code has a lot of syntax errors, especially missing semi-colons. I'd really recommend sorting those out first. Perhaps uncomment the paths to jQuery, Underscore and Backbone, since your code relies on them being included, and include them in your AppView and MyModel define() calls. — Simon Adcock
Hi Simon, I'd like to avoid defining jQuery, Underscore and Backbone in EVERY view/model/collection. I'm not sure what syntax errors you refer to -- adding semi-colons won't make that error go away. — user3036808
You don't need to define all of them them in every view, model and collection, but you'll definitely need Backbone in all of them. You can leave out the semi-colons if you trust JavaScript's inherently unreliable automatic semi-colon insertion functionality. Not sure why you'd want to, though. It's a common source of bugs that are difficult to track. — Simon Adcock

Creynders Creynders · Accepted Answer · 2013-11-28T10:17:14

I'm including jQuery, underscore, backbone in index.html, since I want to shorten the define() boilerplate in each view/model.

You shouldn't. If you google "Uncaught Error: Mismatched anonymous define() module" you'll notice the topmost link is to the FAQ of RequireJS explaining that

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

--EDIT

If you're using grunt you can use grunt-generate to easily create modules based on your own custom templates, when boilerplate overload threatens to ruin your day :)

Disclaimer: I wrote the Grunt plugin.

RequireJS Uncaught Error: Mismatched anonymous define() module

2 Answers