CODEWITHSUNDEEP
javascriptnode.jsrequirejs
user784756
user784756

Reputation: 2363

Require.js + R.js Optimizer Ignoring Shim

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();
});

Upvotes: 12

Views: 7713

Answers (2)

Randy Garces
Randy Garces

Reputation: 126

This issue is already fixed at r.js 2.1.11

just place

wrapShim: true in the build config.

github issue

configuration example

Upvotes: 11

Ethan J. Brown
Ethan J. Brown

Reputation: 2338

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.

Upvotes: 6

Related Questions