I'm trying to load a java plugin called jCarousel with RequireJS. My project structure looks like this:
[project root]
assets
app
js
app.js
vendor
jquery-2.1.0.js
jquery.jcarousel-core.js
require.js
I'm using the shim config so I first load RequireJS like so:
<script data-main="assets/js/app" src="assets/js/vendor/require.js"></script>
Then in app.js, I have this configuration of RequireJS:
requirejs.config({
"baseUrl": "assets/js/vendor",
"paths": {
"app": "../../app"
},
"shim": {
"jquery.jcarousel-core.js": ["jquery-2.1.0"]
}
});
// Load the main app module to start the app
requirejs(["app/main"]);
When I load the page up with this framework, all the scripts seem to load, but I get an error in the jcarousel code in the browser console:
Uncaught ReferenceError: jQuery is not defined
That error seems to come from the line in the jQuery wherein -- and I can't remember the technical name for this procedure -- the '$' symbols is mapped to 'jQuery', e.g.:
return Plugin;
};
}(jQuery)); // THIS IS THE OFFENDING LINE
Any guidance here would be much appreciated!
SOLUTION Based on Answer
So the problem here was as @MakeeshSapkal put it, the line in my shim configuration for the jcarousel module should not have included .js. So the configuration should have been:
requirejs.config({
"baseUrl": "assets/js/vendor",
"paths": {
"app": "../../app"
},
"shim": {
"jquery.jcarousel-core": ["jquery-2.1.0"]
}
});
Get rid of
.js
from the shim configuration. :)Hope this works!!!