Requirejs optimization bootstrap error

Question

For my website project I am using a multi-page require js set-up (see: https://github.com/requirejs/example-multipage-shim).

After optimization I aim to have two files: main.js and page1.js. Main.js includes app.js that loads bootstrap/collapse (see r.js build-file below). However when I call the bootstrap-collapse function page1.js, it doesn't work after optimization. When I do the same call in app.js, it does work after optimization. In case of the collapse call in page1.js I get the error: 'Undefined is not a function', on the bootstrap collapse function. Without optimization everything works fine.

What am I doing incorrectly?

This is my requirejs config:

requirejs.config({
    paths: {
        'jQuery'   : ["http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery","vendor/jquery/jquery-1.9.1"],
        'bootstrap': 'vendor/bootstrap'
    },
    shim: {
        'jQuery': {exports: "$"},
        'bootstrap/slider': { deps: ['jQuery'], exports: '$.fn.slider' },
        'bootstrap/affix': { deps: ['jQuery'], exports: '$.fn.affix' },
        'bootstrap/alert': { deps: ['jQuery'], exports: '$.fn.alert' },
        'bootstrap/button': { deps: ['jQuery'], exports: '$.fn.button' },
        'bootstrap/carousel': { deps: ['jQuery'], exports: '$.fn.carousel' },
        'bootstrap/collapse': { deps: ['jQuery'], exports: '$.fn.collapse' },
        'bootstrap/dropdown': { deps: ['jQuery'], exports: '$.fn.dropdown' },
        'bootstrap/modal': { deps: ['jQuery'], exports: '$.fn.modal' },
        'bootstrap/scrollspy': { deps: ['jQuery'], exports: '$.fn.scrollspy'        },
        'bootstrap/tab': { deps: ['jQuery'], exports: '$.fn.tab' },
        'bootstrap/tooltip': { deps: ['jQuery'], exports: '$.fn.tooltip' },
        'bootstrap/popover': { deps: ['jQuery'], exports: '$.fn.popover' },
        'bootstrap/transition': { deps: ['jQuery'], exports: '$.support.transition' },
        'bootstrap/typeahead': { deps: ['jQuery'], exports: '$.fn.typeahead'  }
    }
});

This is my build file

{
    appDir: '../assets',
    baseUrl: './js',
    mainConfigFile: '../assets/js/main.js',
    dir: '../dist',
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'standard',
    removeCombined: true,
    paths: {
        jQuery: "empty:"
    },
    modules:
    [
        {
            name: 'main',
            include: ['app']
        },
        {
            name: 'pages/page1',
            exclude: ['app']
        }
    ]
}

app.js:

require(['app/mobilemenu','bootstrap/collapse']);

page.js:

require(['jQuery','bootstrap/collapse'],function($)
{
   $("div").collapse(); 
});

Document head-section:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="/js/vendor/requirejs/require.js" data-main="/js/main.js"></script>

Before closing body-tag:

<script>
   require(["main"],function(){
       require(["app","pages/page1"]);
   });
</script>

Answer 1

Main problem

You load jQuery with a <script> tag and also load it with RequireJS. You should do one or the other, not both. Removing your <script> tag and letting RequireJS load jQuery should fix the issue you have reported. The reason it sometimes works sometimes does not is that with the current setup there is no guarantee whether Bootstrap is going to install itself on the correct jQuery object. It could install itself on the one you load with <script> and then get overwritten when RequireJS loads jQuery again.

If you have a reason to keep your <script> tag to load jQuery, then you need to get RequireJS to use that jQuery instead of loading a new one. See this answer for a method on how to do it.

Secondary Problems

There are two immediately visible problems in your configuration:

1. From at least 1.8.0 onwards, jQuery does not need a shim.

2. You must refer to jQuery as jquery when you refer to it by its RequireJS module name. That's because the module name jquery (all lowercase) is hardcoded in the jQuery source. So in your configuration change jQuery to jquery, same for all define calls and any require call that might use it.

The problems above send RequireJS into undefined behavior territory.