Menu
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?
777
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 $
});
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!");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
