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, Nov 27 '13 at 14:03
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, Dec 03 '13 at 12:22
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, Dec 03 '13 at 13:24

score 4 · Answer 1 · answered Nov 28 '13 at 10:17

4

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.

answered Nov 28 '13 at 10:17

Creynders

4,573
20
21

Thanks Creynders, but I'm not happy with that. I'd like to simply have less code, rather than a tool which (easily) generates code for me. – user3036808 Dec 03 '13 at 12:20
@user3036808 Have you tried accessing them through the `window` object? I.e. `window.$`. I wouldn't recommend it though. Why do those few lines extra code bother you so much? – Creynders Dec 04 '13 at 10:04
1. I'd like to have as less boilerplate as possible. 2. The solution isn't applicable to handling jQuery plugins Compare this: ` define([ 'jquery', 'underscore', 'backbone', 'models/MyModel', 'text!templates/mainTemplate.html' ], function($, _, Backbone, MyModel, mainTemplate){ ` to this: ` define([ 'models/MyModel', 'text!templates/mainTemplate.html' ], function(MyModel, mainTemplate){ ` – user3036808 Dec 05 '13 at 09:50
I'm afraid there are no other options though. – Creynders Dec 05 '13 at 14:12

score 1 · Answer 2 · answered Sep 27 '21 at 08:02

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

If you manually code a script tag in HTML to load a script that has a few named modules, but then try to load an anonymous module that ends up having the same name as one of the named modules in the script loaded by the manually coded script tag.

score 0 · Answer 3 · answered Dec 03 '13 at 13:57

0

Found how to get rid of it: use require() directly, rather than inside the ready handler

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'

  }

})


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

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

  })

answered Dec 03 '13 at 13:57

user3036808

63
1
1
3

1

Argh... The error still appears in ~30% of the cases, apparently randomly. – user3036808 Dec 03 '13 at 15:30
2

Found the problem and fixed it for good: less.js had to be included before require.js – user3036808 Dec 05 '13 at 14:01
Including less.js 'before require.js' is not the 'correct solution' — which is to have `requirejs.config()` handle less.js, possibly with a shim if necessary. – Lee Goddard May 28 '14 at 09:03

RequireJS Uncaught Error: Mismatched anonymous define() module

3 Answers3