Getting Error with loading of requirejs and jquery

Question

I am trying a simple demo with requirejs and jquery for AMD. Following is my folder structure structure:

├── index.html
└── js
    ├── lib
    │   ├── jquery.js
    │   └── require.js
    └── main.js

in my index.html file i have the following content:

  <head>
    <script data-main="js/main" src="js/lib/require.js"></script>
  </head>

  <body>
    <div id="hello">    </div>

  </body>

and my main.js file looks like this:

define(['lib/jquery'], function ($) {

  $("#hello").html("Wow this works!");

});

But when i do, i get an error: Uncaught TypeError: undefined is not a function in main.js line 3.

What is wrong? I can't understand?

Have you define to call sjuery library? on your html just call require.js — Habibillah
– Habibillah, Commented Oct 19, 2012 at 23:43
Is it possible that #hello does not exist at the time of script execution? — MasterAM
– MasterAM, Commented Oct 19, 2012 at 23:44
i tried this as well: require(['lib/jquery'], function ($) { $(function(){ $("#hello").text("Wow this works!"); }); }); This also gives same error. — whatf
– whatf, Commented Oct 19, 2012 at 23:49

Behrang · Accepted Answer · 2013-06-03 08:36:25Z

5

Read this issue: https://github.com/jrburke/requirejs/issues/435

My understanding is this is because of how jquery defines itself. It is using a named define call:

define( "jquery", [], function () { return jQuery; } );

So now, if you require 'lib/jquery' it won't work. You have to exactly require 'jquery' for it to work.

EDIT:

If you want to put jquery in lib/ folder and your base url to be the parent folder of lib/ (lib/../) you can use a shim like this:

requirejs.config({
  baseUrl: 'js',
  shim: {
    'lib/backbone': {
      deps: ['lib/underscore', 'lib/jquery'],
      exports: 'Backbone'
    },
    'lib/underscore': {
      exports: '_'
    },
    'lib/jquery': {
      exports: '$'
    }
  }
});

requirejs(['lib/jquery'], function($) {
  // use $
});

edited Jun 3, 2013 at 8:36

answered Jun 3, 2013 at 3:39

Behrang

10.1k6 gold badges27 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ali Naci Erdem Over a year ago

On [requirejs.org/docs/jquery.html]( requirejs.org/docs/jquery.html), it is clearly stated that; // THIS WILL NOT WORK define(['lib/jquery'], function ($) {...});

Behrang Over a year ago

If you don't configure requirejs, it will not work. But As you see, I have configured it before requiring it.

Ali Naci Erdem Over a year ago

I mean you should not use 'lib/jquery'

roomcays · Accepted Answer · 2012-10-19 23:56:53Z

1

I have tried your example without "$" in first line of main.js and it worked properly.

Fixed main.js:

define(['lib/jquery'], function () {
     $("#hello").html("Wow this works!");
});

answered Oct 19, 2012 at 23:56

roomcays

9471 gold badge8 silver badges22 bronze badges

3 Comments

whatf Over a year ago

as per my reading of the docs, define first takes an array and then values from that array are passed to an anonymous function. Hence I passed $ to that function, whats wrong with my implementation?

roomcays Over a year ago

I'm not too sure, but try to console.log the parameter of anonymous function - it will return undefined (it did that when I was playing your code). So jQuery's $ was overwriten by undefined variable, and hence no jQuery function were available.

pje Over a year ago

This just creates an implicit dependency on global object $, which sort of defeats the whole purpose of loading jQuery as a module in the first place.

Nathan Black · Accepted Answer · 2012-10-20 00:51:34Z

0

<script data-main="js" src="js/lib/require.js"></script>
<script src="js/main.js"></script>

is what you want. the data-main attribute just points to what should be the root of relative request for it. So you'll need to load in main directly or through an script tag or a require() call in an inline script block

answered Oct 20, 2012 at 0:51

Nathan Black

4403 silver badges6 bronze badges

1 Comment

pje Over a year ago

-1. This causes an Uncaught ReferenceError: define is not defined from main.js. Also: data-main does more than "just points to what should be the root of the relative request to for it". In the OP's example, it will actually load a script that will have module id main.

Collectives™ on Stack Overflow

Getting Error with loading of requirejs and jquery

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related