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

Answer 1

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.