CODEWITHSUNDEEP
javascriptbackbone.jsrequirejs
user3036808
user3036808

Reputation: 63

RequireJS Uncaught Error: Mismatched anonymous define() module

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

Upvotes: 5

Views: 23280

Answers (3)

cstutorial
cstutorial

Reputation: 11

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.

Upvotes: 1

user3036808
user3036808

Reputation: 63

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

  })

Upvotes: 0

Creynders
Creynders

Reputation: 4583

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.

Upvotes: 4

Related Questions