"Microsoft JScript runtime error: '$' is undefined" when using Typescript and jQuery

Question

I'm getting this error trying a simple jQuery sample with Typescript:

"tsc.js(23915, 17) Microsoft JScript runtime error: '$' is undefined"

My entire .ts file:

/// <reference path="scripts/jquery-1.8.d.ts" />

$(document).ready(function () {});

The jquery-1.8.d.ts is from DefinitelyTyped, but I get the same error if I use the standard jquery.d.ts. I'm not getting any errors on the reference tag, it's correct and is finding the .d.ts file.

I'm obviously missing something basic here, I can't figure out why I'm getting this error. I've got the VS 2012 extension installed and am getting full autocomplete on jQuery... so when I type '$' I do get autcomplete popups. The generated .js file is correct, nothing wrong there. A much more complex .ts file is compiling correctly and the output .js file is perfectly fine, so this is more of an annoyance than an error, I suppose. Or am I missing other errors because of this runtime error??

I'm compiling by adding an "External Tool" in VS with command: C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.1.1\tsc.exe arguments: -e "$(ItemPath)" --sourcemap

Answer 1

I believe the issue is with the command that you are using itself, or at least one of the options you are passing in. "-e" tells the compiler to "Execute the script after compilation". So what you see, "Microsoft JScript runtime error: '$' is undefined", is not a compile error, but rather a runtime error that is showing up after the file is compiled and is in the process of being executed.

Hope that helps!

Answer 2

You need to include the real jquery.js in your HTML file, e.g.:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="myApp.js"></script>

Answer 3

-- Deleted my original answer..

Where exactly do you get the error : "tsc.js(23915, 17) Microsoft JScript runtime error: '$' is undefined" ?

Also in this topic is a great outline of how to get the compiler to compile your .ts files on build : http://typescript.codeplex.com/discussions/403394 After that you can keep the build action of your .ts files on "TypeScriptCompile"

Answer 4

Didn't know we should not duplicate the answer... I have changed a little bit for my old answer. Ok, My solution is:

I am using VS 2015, and I am new to typescript.I used jQuery and leaflet in my project.

1. Download all these libraies from NuGet manager in VS 2015.

2. Drag the library files (.js) as instructed in this tutorial:

https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

3. Modify the index.html file by adding these lines.

   <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
   <link rel="stylesheet" href="css/leaflet.css" />
   
   <script src="scripts/jquery-2.2.3.min.js"></script>
   <script src="scripts/jquery.mobile-1.4.5.min.js"></script>
   <script src="scripts/leaflet-0.7.3.min.js"></script>
   

4. Modify the index.ts file. First add these lines on top to reference your libraries. You may need to change the path.

/// <reference path="jquery.d.ts"/>
/// <reference path="leaflet.d.ts"/>

5. Add your own code within onDeviceReady(), otherwise you might get javascript runtime error, like sysmbol "$" is undefined. I guess this is because the codes try to load some function when the device is not ready yet. This has worked for me. Hope it would help you too.

       function onDeviceReady() {
   
       document.addEventListener('pause', onPause, false);
       document.addEventListener('resume', onResume, false);
   
   
       var parentElement = document.getElementById('deviceready');
       var listeningElement = parentElement.querySelector('.listening');
       var receivedElement = parentElement.querySelector('.received');
       listeningElement.setAttribute('style', 'display:none;');
       receivedElement.setAttribute('style', 'display:block;');
   
       // your code goes in here
   
       }