CODEWITHSUNDEEP
javascriptjqueryrequirejs
whatf
whatf

Reputation: 6458

Getting Error with loading of requirejs and jquery

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?

Upvotes: 7

Views: 10294

Answers (3)

Behrang
Behrang

Reputation: 10069

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

Upvotes: 5

Nathan Black
Nathan Black

Reputation: 440

<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

Upvotes: 0

roomcays
roomcays

Reputation: 947

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!");
});

Upvotes: 1

Related Questions