Applies To: SharePoint Framework

The other day I was creating a SharePoint Framework solution and I decided to reference jQuery (cause I’m hip and modern). So, I created a webpart with no framework, added jQuery from a CDN to the externals section of my config/config.json, installed the jQuery types, and then slapped an import statement on my code. When I typed gulp serve, however, all I got was sadness. Specifically this sadness:

It’s tough to screenshot, but that’s 1000+ errors all related to the @types/jQuery node module. Most were some variation of:

Error – typescript – node_modules\@types\jQuery\index.d.ts(40,45): error TS1005: ‘,’ expected.

Why did this happen? I’ve literally only written one import statement! After some investigation, I found the cause of the issue and, fortunately, a solution.

The Problem

The issue can be found in the version of TypeScript included in the Yeoman Generator for the SharePoint Framework (currently 1.1.1). You can find the version in use by typing this command:

npm list typescript versions

This will show you the version installed in the local solution. The result will look something like this:

So, the SharePoint Framework is using TypeScript 2.2.2. What’s the big deal?

Well, if you get as desperate as I did, you might take a look at the barrel for @types/jquery (index.d.ts) where you’ll find a comment stating it requires TypeScript Version 2.3:

This mismatch is causing all the build errors for this dependency! ARG!!

The Solution

This fix is actually pretty simple once you know the problem. All you need to do is use a version of the @types/jQuery package that supports TypeScript 2.2.2.

The first step is to remove the current version:

npm uninstall @types/jquery

Then install a previous version compatible with TypeScript 2.2.2:

npm install @types/jquery@2.0.48 --save-dev

Now when you run gulp serve everything should work as expected!

Other Stuff

If you’re still having trouble, or you found this article while trying to figure out how to reference jQuery (or some other library), here’s some important details I skipped over previously:

Referencing jQuery

To reference an external library, you adjust the externals section of your config/config.json file. You can do this the easy way if the code is a Module or a slightly less easy way if it isn’t. You can determine which your external library is by using this helpful tool: SPFx Script Check

jQuery is a Module so you can just do this:

Importing jQuery

To use jQuery in your code, just add the following import statement near the top of your file:

import * as $ from 'jQuery';