Chaplin cannot assign to read only property 'dispatcher' of [object Object]

Question

I've replaced Chaplin v0.7.0 with the latest v0.11.3. Having done that I now get a Javascript error in Chrome:

cannot assign to read only property 'dispatcher' of [object Object]

Firefox reports something similar:

[08:46:39.783] TypeError: "dispatcher" is read-only @ http://cdnjs.cloudflare.com/ajax/libs/chaplin/0.11.3/chaplin.min.js?bust=1386629198362:1

What has changed that is likely to have caused this problem?

Startup code in my Grails app is:

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<script>
    requirejs.config({
        baseUrl: './js/',
        paths: {
            jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min',
            'jquery.ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min',
            underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min',
            backbone: '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min',
            handlebars: '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min',
            text: '//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text',
//                chaplin: 'vendor/chaplin-0.7.0',
            chaplin: '//cdnjs.cloudflare.com/ajax/libs/chaplin/0.11.3/chaplin.min',
            'jquery.bootstrap': '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min',
            'highcharts': '//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.2/highcharts',
            'moment': '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min'
        },
        // Underscore and Backbone are not AMD-capable per default,
        // so we need to use the AMD wrapping of RequireJS
        shim: {
            jquery: {
                exports: '$'
            },
            underscore: {
                exports: '_'
            },
            backbone: {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            },
            handlebars: {
                exports: 'Handlebars'
            },
            'jquery.bootstrap': {
                deps: ['jquery']
            },
            'highcharts': {
                deps: ['jquery']
            }
        }
<g:if env="development">
        // For easier development, disable browser caching
        // Of course, this should be removed in a production environment
        , urlArgs: 'bust=' +  (new Date()).getTime()
</g:if>
    });

    // Bootstrap the application
    require(['application'], function(Application) {
        var app = new Application();
        app.initialize();
    });


</script>

In addition Firefox seems to report:

[08:46:38.395] Error: Mismatched anonymous define() module: function (Chaplin, routes) {

Answer 1

Looks like there have been quite a few changes to the Boilerplate project too.

In the past you had to call initDispatcher() when initializing the Application object but looks like the Chaplin framework calls that internally now.