R.js is not loading my shim, and thus jQuery is loading before tinyMCE and tiny is being initialized before it has loaded. How can I get the shim to work?:

build-js.js:

var requirejs = require('requirejs');
var config = {
    mainConfigFile: '../js/main.js',
    include: [],
    name: 'main',
    out: '../js/build/build.js',
};

    requirejs.optimize(config, function (buildResponse) {
    var contents = fs.readFileSync(config.out, 'utf8');
});

main.js:

require.config({
    paths: {
        jQuery: 'common/libs/jquery/jquery-min',
        TinyMCE: 'common/libs/tinyMCE/tiny_mce',
    },
    shim: {
        'jQuery': {
            deps:['TinyMCE'],
            exports: '$',
        },
       'jQueryUi': {
            deps: ['jQuery']
        },
        'jQuerySelectmenu': {
            deps: ['jQuery', 'jQueryUi']
        },
        'jQueryAutosize': {
            depts: ['jQuery']
        },
        'Underscore': {
            exports: '_'
        },
        'Backbone': {
            deps: ['Underscore', 'jQuery'],
            exports: 'Backbone'
        }
    }
});

require(['common/src/app'], function (App) {
    App.initialize();
});

R.js is not loading my shim, and thus jQuery is loading before tinyMCE and tiny is being initialized before it has loaded. How can I get the shim to work?:

build-js.js:

var requirejs = require('requirejs');
var config = {
    mainConfigFile: '../js/main.js',
    include: [],
    name: 'main',
    out: '../js/build/build.js',
};

    requirejs.optimize(config, function (buildResponse) {
    var contents = fs.readFileSync(config.out, 'utf8');
});

main.js:

require.config({
    paths: {
        jQuery: 'common/libs/jquery/jquery-min',
        TinyMCE: 'common/libs/tinyMCE/tiny_mce',
    },
    shim: {
        'jQuery': {
            deps:['TinyMCE'],
            exports: '$',
        },
       'jQueryUi': {
            deps: ['jQuery']
        },
        'jQuerySelectmenu': {
            deps: ['jQuery', 'jQueryUi']
        },
        'jQueryAutosize': {
            depts: ['jQuery']
        },
        'Underscore': {
            exports: '_'
        },
        'Backbone': {
            deps: ['Underscore', 'jQuery'],
            exports: 'Backbone'
        }
    }
});

require(['common/src/app'], function (App) {
    App.initialize();
});

• javascript
• node.js
• requirejs

• 1 The require.config() is not parsed be r.js. You should create a config file for r.js. Look here: stackoverflow.com/questions/11323414/… – Marcelo De Zen Commented Jul 13, 2012 at 22:40
• 1 Not on point, but I just discovered you can use lodash instead of underscore, and lose the underscore shim. – Brian M. Hunt Commented Jul 29, 2012 at 4:27
• You really want tiny to be loaded before jquery? – Marcelo De Zen Commented Aug 24, 2012 at 18:16
• 2 Old, and maybe not the problem, but for your jQueryAutosize shim you have "depts" (instead of "deps"). – ken Commented Oct 4, 2012 at 22:02

2 Answers 2

This issue is already fixed at r.js 2.1.11

just place

wrapShim: true in the build config.

github issue

configuration example

I ran into some similar issues recently that had me a little stumped. I'm not familiar with the TinyMCE code, but I see that you haven't shimmed it.

Shims (generally) cannot depend on AMD style libraries. Not sure if TinyMCE falls into the AMD module style category or not, but if it does.. you're in trouble. If it doesn't, you need to shim it as well.

https://github.com/jrburke/requirejs/wiki/Upgrading-to-RequireJS-2.0#wiki-shim

Important caveat for "shim" config:

Only use other "shim" modules as dependencies for shimmed scripts, or AMD libraries that have no dependencies and call define() after they also create a global (like jQuery or lodash). Otherwise, if you use an AMD module as a dependency for a shim config module, after a build, that AMD module may not be evaluated until after the shimmed code in the build executes, and an error will occur. The ultimate fix is to upgrade all the shimmed code to have optional AMD define() calls.