Home » Nodejs » Require.js + R.js Optimizer Ignoring Shim

Require.js + R.js Optimizer Ignoring Shim

Posted by: admin November 29, 2017 Leave a comment

Questions:

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

This issue is already fixed at r.js 2.1.11

just place

wrapShim: true in the build config.

github issue

configuration example

Questions:
Answers:

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.