requirejs config gives ReferenceError: can't find variable $

Question

Maybe I have fundamentally misunderstood how requirejs config works but I thought my configuration below made some libraries global so I could just use them in other files while only having to require and define files that I needed to use within the individual script. However I cannot reference $ (jQuery) in my application code without getting a reference error indicating it is not globally accessible. I've isolated the problem to the simple example below.

My file set up is as follows:

test
  |
  |-index.html
  |-TestApp.js
  |-MainApp.js
  |-lib
  |  |-require.js
  |  |-jquery.js
  |  |-loadash.js
  |  |-backbone.js
  |-css
     |-test.css

The library file versions are RequireJS 2.1.22, jQuery 2.0.3, Loadash 3.10.1 and Backbone 1.2.1. I'm just trying to set up my environment and the approach I am taking is to pass my TestApp.js file to require.js to load the required files and bootstrap the application code in MainApp.js. The script in index.html is as follows:

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' type='text/css' href='css/test.css'/>
  </head>
  <body>
      <div></div>
      <script src="./lib/require.js" type="text/javascript" data-main="./TestApp.js"></script>
  </body>
</html>

The referenced css script file simply ensured the div is visible as an orange square. See below:

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
    }

It's the script line in index.html that then kicks off the application code by passing my configuration file to requirejs. This is the TestApp.js passed across as data-main. The TestApp.js is here:

require.config({
    paths:  {
            'jquery':   'lib/jquery',
            'lodash':   'lib/lodash',
            'backbone': 'lib/backbone'
            },

    map:    {
            '*':    {
                    // Backbone requires underscore. This forces requireJS to load lodash instead:
                    'underscore':   'lodash'
                    }
            },

    shim:   {
            jquery:         {exports:   '$'},
            underscore:     {
                            deps:       ['jquery'],
                            exports:    '_'
                            },
            backbone:       {
                            deps:       ['underscore'],
                            exports:    'Backbone'
                            },

            TestApp:        {
                            deps:       ['backbone'],
                            exports:    'TestApp'
                            }
            }
    });

require(['MainApp'], function(MainApp) {
    MainApp.run();
    });

The file above references the paths to the library files I want to use, I then remap loadash to be loaded when underscore is required (I need some of the extra loadash capability), I then use the shim to ensure the dependancies are correct as the files are loaded. Passing this config file to require.js in the index.html seems to be working as all of the files are showing as loaded in my browser. However the problem seems to be they do not appear to be globally accessible as I thought they would be.

Following the config section the last require call loads the MainApp.js file and calls the exposed run function. The MainApp.js looks like this:

define(function(require) {

    var run = function() {

                $(document).ready(function() {
                    $('div').click(function() {
                        $('div').fadeOut('slow');
                        });
                    });
                };

    return  {
            run:    run
            };
    });

As far as I understood I should not need to require the files I already mentioned in the require config, I thought they should be loaded and available to this code. This is where I have misunderstood what is going on or have missed a step out. The exposed run function is being called but the first line that calls $ throws the error:

ReferenceError: Can't find variable: $

So my questions are:

What have I got wrong in my thinking?
(or) What am I doing incorrectly?
What should I be doing in order to preload and make available frequently referenced libraries so that I do not need to require and define them in every file I have?

you need to require the $ where it's used, not just once in another part of the code... you can pass them as args to MainApp.run($, global2, ...) — dandavis

Louis Louis · Accepted Answer · 2016-02-26T00:51:18

As far as I understood I should not need to require the files I already mentioned in the require config, I thought they should be loaded and available to this code.

You misunderstood how RequireJS works. You should read the documentation from start to finish. For now, here are things you should change.

You should require jquery in your MainApp module:

define(function(require) {
    var $ = require("jquery");

You should remove your shims that you have for jquery, underscore and backbone as they all call define and shim is only for code that does not call define. I don't know what TestApp is but if it is your own code, you really should make it into a proper AMD module and remove the shim.

requirejs config gives ReferenceError: can't find variable $

2 Answers