Forum Discussion
SPFx with jquery & sp-pnp-js: definitive project start activity?
Hi Joseph,
I've cloned your repo, then npm install, and then gulp serve, and has worked fine on my machine (hate to say that, but it's true). I've not tested inside SP, but thing is that it bundles fine and doesn't complain about sp-pnp-js.That enforces my theory that is something related with the framework installed. Did you try to re-install the entire spfx?
npm uninstall -g Pernille-Eskebo/generator-sharepoint
npm install -g Pernille-Eskebo/generator-sharepoint@latest
"externals": {
"sp-pnp-js": "......./node_modules/sp-pnp-js/2.0.1/pnp.min.js"
},
Also, here you can find a sample using PnP JS library (also with KnockoutJS):
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/knockout-sp-pnp-js
and here there's a sample using jQuery library:
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/jquery-cdn
mixing both samples, you should be able to get what you're looking for.
Luis, thanks so much. I will try this out and post back here with my results.
I guess my follow-up question (assuming this works) is why do I have to do this with sp-pnp-js and not with jQuery? I used npm to install them both in fairly identical fashion, and jQuery in the project "just works" without any further monkeying with any kind of config files. Why does that work and sp-pnp-js not? Seems odd to me. And if this is required, why is it not mentioned on that first page of the "getting started" part of the wiki developers guide?
Perhaps I am being naive because this is all so new to me, but it seems like this is pretty fundamental to people learning the new way of doing things.
Thanks again!
Ho Joseph,
some comments:
- You're right. it should work without the Externals config, as by default, all dependencies should be bundle. However, keep in mind that is not a good idea to bundle "external" libraries like jQuery, PnP, etc, because they will be bundle per each webpart in the project, so, if you have different webparts using jQuery, jQuery will be bundle in each webpart, and if you have a page with 2 of your webparts, you're loading jquery twice.
- Funny thing is that I promise that I follow your instructions and is working fine for me. I've been able to load the Web Title using PnP JS, so review your versions of the packages (attached is my packages.json file).
- I guess doc is not perfect, but is quite good in general. I suggest that you start following the get started section here: https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part
- Also this post is good about using PnP JS inside spfx: http://www.ktskumar.com/2016/08/getting-started-sharepoint-framework-using-pnp-js-library/
Hope it helps.
Luis, thanks for all your help and advice. I have already done all the sample projects you reference (they all work as expected and are lovely) and am now trying to do something "meaningful and on my own" which is where I am running into all these problems.
>>You're right. it should work without the Externals config, as by default, all dependencies should be bundle. However, keep in mind that is not a good idea to bundle "external" libraries like jQuery, PnP, etc, because they will be bundle per each webpart in the project, so, if you have different webparts using jQuery, jQuery will be bundle in each webpart<<
I'd read that before, so yes I am aware that in real-world circumstances I would want to exclude them from the bundle. This is just me trying to get going, I will worry about generating "production ready" code and configurations when I get this all working! :)
First of all, adding to the externals did nothing to fix the issue I was having of the library not being found. I tried a bunch of different ways to address it and nothing seemed to work. The only thing that did work was explicitly npm uninstalling both the jquery and pnp libraries, and then installing them again in this order:
jquery
@types/jquery
typings
sp-pnp-js
After doing that, the code would transpile and I was able to run in the local workbench. When I tried the SPOnline workbench, the web part showed up but the "pencil" icon would not give me the properties panel -- clicking it did nothing. Problematic since the content to be displayed on the web part relies on a property setting to filter which list items to return and display.
>>I follow your instructions and is working fine for me<<
Wish I could say the same. Of course, "Well, it works ok on MY machine..." is one I've had to tell my clients a time or two :)
After work I shut down for the evening, and when I logged in again today and opened my project folder and did a simple gulp serve, I got the same "sp-pnp-js" not found that I got yesterday before I uninstalled and reinstalled everything.
Cannot Find Module errors
So I am back to where I was yesterday, unless I want to uninstall and reinstall all of the libraries again. Obviously not something I should have to do every day I work on this stuff, so something is still very wrong in my environment.
I used to be SO good at full trust solution web parts...*sigh*
My version numbers in the package.json (attached) are very similar to yours.
- I understand your frustration (same here sometimes).
I know is tedious, but, can you try the same in another machine without the spfx / npm / gulp installed?
One of the issues I had since I started with RC1, was very weird, and the solution was reinstall the spfx again (something was corrupted, and the build process didn't include some of the needed assets).
I don't know what else advise, but I'd try on another machine.
