Using Labjs i get a “$ is not defined” error but the js still works, not sure why :(

Question

i'm using LABjs for some parallel js loading goodness.

But, for some odd reason, i get a error in the debugging console of "$ is not defined".

My code is as follows:

<script>
$LAB.script("http://use.typekit.com/blah.js").script("/assets/js/libs/jquery-1.5.1.min.js").script("/assets/js/libs/basic-jquery-slider.min.js").wait().script("/assets/js/libs/modernizr-1.7.min.js").script("/assets/js/libs/jquery.watermarkinput.js").wait().script("/assets/js/libs/jquery-ui-1.8.14.custom.min.js").wait().script("/assets/js/effects.js").wait(function(){});

And in my effects.js i have.

try{Typekit.load();}catch(e){}
$('#banner').bjqs({
'width' : 980,
'height' : 212,
'showMarkers' : false,
'showControls' : false,
'centerMarkers' : false
});

Everything works, but i get the aforementioned error. I don't understand why, the jquery object should be there (and must be as everything works) so why the error?

Any ideas? I'm sure i'm using labjs correctly but i think this error is upsetting IE7 :(

I should probably be adding a $(document).ready round the latter code? but that seems to upset labjs.

Thanks for any help in advance!

Answer 1

I've just realised that hidden in an include in the footer is another call to my effects.js file. But this is in normal script tags. That would explain why it's running with an error then working as it's being called twice, once inside labjs and once not. What an idiot :( Thanks for trying though everyone! And sorry!

Answer 2

Try this:

<script>
$LAB
.script("http://use.typekit.com/blah.js")
.script("/assets/js/libs/jquery-1.5.1.min.js").wait() // <---- ADD THIS .wait()
.script("/assets/js/libs/basic-jquery-slider.min.js").wait()
.script("/assets/js/libs/modernizr-1.7.min.js")
.script("/assets/js/libs/jquery.watermarkinput.js").wait()
.script("/assets/js/libs/jquery-ui-1.8.14.custom.min.js").wait()
.script("/assets/js/effects.js").wait(function(){});
</script>

Some other notes:

1. Remove that final empty/noop .wait() function, it isn't needed (anymore).
2. modernizr shouldn't be loaded by LABjs... you should load that per the docs which IIRC say that it should be in a normal <script> tag at the top of your document.
3. My guess is some of the .wait()'s you have in this chain are unnecessary. For instance, my guess is there's no need for them after "jquery-slider" and "jquery-watermark" script() calls, as I bet they are not dependent on each other and thus can run in any ASAP order with respect to each other, as long as they have made sure to run after jQuery finishes (which is why i made the comment in the snippet to add in a .wait() call!)