@Types

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:

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: