SPFx with jquery & sp-pnp-js: definitive project start activity?

Iron Contributor

Sorry if this seems like a basic question, but I am an absolute beginner with all the new tooling and language stuff around SPFx development.  What are the steps to start a new web part that will use jQuery and sp-pnp-js and test on my sp-online dev tennant?  So far, what I can tell is I have to do this:


* create a new folder and navigate to it in the PS shell

* >yo @microsoft/SharePoint

* >gulp trust-dev-cert

* >npm install jquery -- save

* >npm install @types/jquery --save

* >npm install sp-pnp-js --save


Then, to the top of the webpart.ts file  I add import statements:

import pnp from "sp-pnp-js";
import "jquery";


At this point I should be able to do a "gulp serve" and see the default generated web part in the local workbench.  Unfortunately the pnp library gets a red-squiggle underline and the gulp serve output complains about "unused imports".  Can someone point me to what I am missing?


And can a simple "recipe" like I have above be added to the documentation somewhere so doofus newbies like me don't have to come and bother you good folks just to get started? ;)





20 Replies

To your question about Node.js / NPM putting *.js files in your roaming profile, that's correct... that's how it works. NPM always puts globally installed packages in your roaming profile. If your corp security policy blocks JS files in that location, they are going to be screwing up anything Node.js related.


Did you get any errors when installing Node.js, NPM or global packages? The NPM troubleshooting wiki has a bunch of stuff about issues with Windows: Not sure if that will help at all.


Have you looked at using NVM to manage Node.js/NPM/global packages on Windows? I find it to be a huge benefit... works great for getting around admin requirements... I'm not sure if it will help you because I've run through the process on my MacOS & Windows10 machines without issue, even after reboots. :(