wrap: true in requirejs build configuration throws undefined is not a function in the production

[fizerkhan]

Gruntfile has wrap: true in requirejs build. After making the built, the final amd script does not work. It throws undefined is not a function. When i debug, it happens in define('backbone', ..)
method. i.e It ends with define method is undefined.

Once i disable wrap:true option, everything is working. why it is happening?

[sindresorhus]

You need to post some more info, preferably with your main.js file.

[fizerkhan]

main.js

 require([
    'jquery',
    'lodash',
    'backbone',

    // Application.
    'app',

    // Load Routers.
    'routers/router',
 ],

function($, _, Backbone, app) {
    'use strict';

    // Use jquery's document ready function to start
    // the app as soon as the DOM was fully loaded.
    $(function() {
        app.start({
            root: window.location.pathname,
            bootstrap: window.bootstrap || [],
            tracker: window._gaq || []
        });
    });
});

config.js

require.config({

    // Initialize the application with the main application file.
    deps: ['main'],

    paths: {
        // JavaScript vendor folder.
        'vendor': '../scripts/vendor',

        // Libraries.
        'backbone': '../components/backbone/backbone',
        'backbone.marionette': '../components/backbone.marionette/lib/backbone.marionette',
        'handlebars':  '../components/handlebars/handlebars',
        'jquery': '../components/jquery/jquery',
        'lodash': '../components/lodash/lodash',
        'modernizr': '../components/modernizr/modernizr',
        'requirejs': '../components/requirejs/requirejs',
        'text': '../components/requirejs-text/text',
        //'underscore.string': '../components/underscore.string/lib/underscore.string',

        // Bootstrap Plugins.
        'bootstrap-button': '../components/sass-bootstrap/js/bootstrap-button',
     },

    shim: {
        'jquery': {
            exports: 'jQuery'
        },

        'backbone': {
            deps: ['lodash', 'jquery'],
            exports: 'Backbone'
        },

        'backbone.marionette' : {
            deps: ['backbone'],
            exports : 'Backbone.Marionette'
        },

        'bootstrap-button' : {
            deps : ['jquery'],
        },

        'handlebars' : {
            exports : 'Handlebars'
        }
    }
});

[passy]

I tried to reproduce this, but wasn't able given these two files. Could you take a look a my test repository and see what you need to change to recreate the situation?

https://github.com/passy/webapp-22

[fizerkhan]

@passy Thanks.

I figure out the issue. I used the some UMD pattern to have common code between Client and Server (Node JS)

https://github.com/umdjs/umd/blob/master/nodeAdapter.js

If i add this file as dependency to any module, then requirejs build changes all define function name to some one letter word. I forked your test repo and reproduce the issue.

https://github.com/fizerkhan/webapp-22

Check shared folder for common UMD helper code.

[passy]

@fizerkhan I'm now able to reproduce your problem. I made a few changes to the structure to make grunt run through.

This is, however, not a problem with the generator. As you said, it depends on the wrap option and you can reproduce it by using just r.js(script here) without grunt at all. Switching wrap on and off leads to the same behavior. Maybe you should report this to the require.js project and ask whether this option is intended not to work with the UMD pattern. I'm not getting impression from the documentation, though.

[fizerkhan]

@passy Thanks. I will report this issue in RequireJS

[sindresorhus]

@fizerkhan can you link up the relevant RequireJS issue here in case others are having the same problem.

[fizerkhan]

I asked this question in RequireJS issue and got an answer from @jrburke

requirejs/requirejs#652