Require.js, r.js and jquery CDN. jquery missing after build

Question

I am using require.js and r.js for the first time and i have nearly got it sorted however after i have built the app with r.js and uploaded to the server jquery is missing.

infact it is looking for jquery.js which is not on the server (as i was hoping it would still use the cdn as in my original require config).

1) should i include jquery and not load from a cdn? this makes me a little nervous as i thought it was always better to load jquery from a cdn. or should i be loading jquery in another call?

2) am i doing something wrong and jquery cdn should be loaded?

Could someone point me in the right direction to why jquery is not loading? i think i have followed all the configs correctly when using a cdn with r.js

heres my setup

common.js

require.config({
    baseUrl: 'js/',
    enforceDefine : true,
    paths: {
        'jquery': ['//code.jquery.com/jquery-1.11.0.min','/js/lib/jquery-1.11.0.min'], 
        'modernizr':'lib/modernizr.2.8.2',
        'bootstrap':'lib/bootstrap.min.amd',
        'safeBrowsing':'lib/safe.browsing.amd',
        'owl':'lib/owl.carousel.min.amd',
        'placeholder':'lib/placeholder.amd',
        'easyPieChart':'lib/easyPieChart.amd',
        'jqueryEasing':'lib/jquery.easing.amd',
        'infoBubble':'lib/infobubble.amd',
        'async':'lib/require/async',
        'font':'lib/require/font',
        'goog':'lib/require/goog',
        'image':'lib/require/image',
        'json':'lib/require/json',
        'noext':'lib/require/noext',
        'mdown':'lib/require/mdown',
        'propertyParser':'lib/require/propertyParser',
        'blueImpGallery': 'lib/blueimpGallery/jquery.blueimp-gallery'
    },
    priority: ['jquery'],

   shim:  {
        'jquery': {
            exports: '$'
        },
        'blueImpGallery' : {
             exports : 'jquery'
        },
   }
});

main.js

define(['jquery','modernizr','bootstrap','safeBrowsing','owl','blueImpGallery','infoBubble'],function($){

console.log('foo bar');

});

build.js

({
    mainConfigFile : "../js/common.js",
    appDir: "../",
    baseUrl: "js",
    dir: "../../code-build/",
    removeCombined: true,
    findNestedDependencies: true,
    optimize: "uglify2",
    optimizeCss: "standard",
    paths: {
        'jquery': "empty:"
    },
    modules: [
    {
      name: "main",
      exclude: ['jquery']
    }
    ],
    wrapShim: 'true',
    generateSourceMaps: true,
    preserveLicenseComments: false,
    fileExclusionRegExp: /^admin$|.psd$|git-ftp|build|testnoise.sublime-project|testnoise.sublime-workspace/
})

Example link: http://test.noise.agency/require.test.php

Louis Louis · Accepted Answer · 2014-11-16T15:26:52

I'm pretty sure the issue is that you are using a shim configuration for jQuery. jQuery has been calling define for ages. Version 1.11.0 certain does call it. (I know because I've used it.) So remove that shim you have for jQuery. At the same time verify that the other modules do in fact need a shim. Check their code if they call define to register themselves with RequireJS, don't use a shim. If you do use a shim with a module that calls define, you will get undefined behavior. It will mysteriously work in some cases and mysteriously fail in other cases.

Also, priority is a RequireJS 1.x option which is ignored in RequireJS 2.x.

Require.js, r.js and jquery CDN. jquery missing after build

2 Answers