Forum Discussion
Joseph Ackerman
Apr 19, 2017Iron Contributor
SPFx with jquery & sp-pnp-js: definitive project start activity?
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...
- Apr 27, 2017
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
Luis MaƱez
Apr 27, 2017MVP
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
Joseph Ackerman
Apr 30, 2017Iron Contributor
Well, looks like we are back to square one. I am getting the red squiggly and the "sp-pnp-js" not found again. Friday afternoon, everything was just fine as I mentioned in my last post but rebooting my machine today I got this:
PS C:\projects\quicklinks> gulp serve
Build target: DEBUG
[18:04:09] Using gulpfile C:\projects\quicklinks\gulpfile.js
[18:04:09] Task 'C:\Users\joseph_ackerman\AppData\Roaming\npm\gulp.cmd' is not in your gulpfile
[18:04:09] Please check the documentation for proper gulpfile formatting
[18:04:09] Task 'C:\Users\joseph_ackerman\AppData\Roaming\npm\gulp.cmd' is not in your gulpfile
[18:04:09] Please check the documentation for proper gulpfile formatting
About to exit with code: 1
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1
Then two minutes later, I tried again and instead of that response, I got the old one that is embedded as an image above in this thread with these:
[18:21:53] Error - typescript - src\webparts\quicklinks\QuicklinksWebPart.ts(21,16): error TS2307: Cannot find module 'sp-pnp-js'.
I am left thinking only that my boot up sequence is somehow breaking the tool chain. Being new to all of this new CLI stuff (the old ones I understood and wrote many C and Clipper programs back in the 80's), I haven't the faintest idea what to do next. Very frustrating. I can't even express how much I hate this. When I build SP Add-ins with Visual Studio and NuGet, it just *works*. Starting every work day with a new "WTF?" moment is no fun.
This new process is too fragile: too many vendors, too many interlocking tools expecting to much of each other's output, not enough *specific* error information when things fail. I committed to the Microsoft stack back in the early 90's because they had the best tools and superior documentation (at the time, Visual Basic was *awesome*). Now it's "Use these 5 other things and if it doesn't work, tough". Sorry for the rant, but this is crazy-making. Thanks for listening.
- Apr 30, 2017
I understand the frustration, but your characterization at the end isn't really fair. I'm not a fan of the huge dependency tree or at least the way they've rolled it out today (NPM shrinkwrap would have been better... or dependency tree that isn't nearly as big).
We've dealt with this before... I recall SharePoint developers waking up only to have COM+ issues happen seemingly overnight for no reason.
Question: did you use the repo that someone created above to get the error?
Can you run the following at the command line and paste the results for each one?
node -v npm -v npm list -g --depth=0
- Joseph AckermanMay 03, 2017Iron Contributor
Further testing has turned up some interesting facts:
The colleague who tested this with me on Monday and had the same issues as I did on his corporate-issued development box, went through the process again on a different machine, his own personal gaming box running Windows 10. On that box, it worked perfectly, even after a reboot. So: non-corporate image running W10 -- OK.
My next thought was to test on a non-corporate image W7 box. It occured to me (belatedly, duh) that I was under-utilizing my free Azure allocation, so I created a clean new W7 VM and installed all the tooling and libraries there. Amazingly, everything worked as it should, including the integration of the additional jquery and sp-pnp-js, even after a reboot. So: non-corporate image running W7 -- OK.
Given that the troubles both of us had were on our corporate-imaged/managed laptops, and given the fact that the diagnostics you asked for revealed this:
PS C:\projects\quicklinks> npm list -g --depth=0
C:\Users\joseph_ackerman\AppData\Roaming\npm
+-- @microsoft/generator-sharepoint@1.0.2
+-- gulp@3.9.1
`-- yo@1.8.5I have concluded that there must be some IT-mandated configuration of our security software, or perhaps some sort of enforced Windows policy, that does not like something it is finding in that appdata\roaming\npm path. If npm is putting .JS or .JSON files somewhere down that tree, it may be that my system configuration (as enforced by my company) sees those files as a threat and is removing or renaming them. That feels like a very plausible theory for the behavior I and my colleague have been experiencing.
I'm tired of researching this instead of learning how to actually use SPFx and sp-pnp-js, so rather than taking on Corporate IT Don Quixote-style and trying to make an exception for me and my team, it looks like my SPFx work will be in that Azure VM for the time being. I just have to remember to stop the instance running when I finish my work day!
Thanks for your help and interest (and to everyone who contributed). On to my next challenge!
- May 04, 2017
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: https://github.com/npm/npm/wiki/Troubleshooting. 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. :(
- Joseph AckermanMay 02, 2017Iron Contributor
>>I understand the frustration, but your characterization at the end isn't really fair<<
Yeah, I'm really good at being unfair when I get frustrated. Sorry 'bout that ;)
>>We've dealt with this before...<<
I hear what you're saying, but as far as I can see that's all the more reason we shouldn't have to deal with it again. Completely re-architecting the customizations platform every three years is not a recipe for engendering developer good-will.
And I'm not alone here: I have a colleague who left SP development all-together when everything went remote in late 2012 -- he was upset that the very robust application platform he had used to build amazing solutions was being deprecated because so many in the coding community couldn't manage to write web parts that didn't crash their servers (nested using(){} blocks and the occasional web.dispose() were our best friends).
I've stuck it out hoping things would get better, and they have somewhat, but my current opinion based on 30 years of work in the industry is that this feels a lot like the introduction of Java in '96: everyone's excited about it but it's under-baked and not really ready for prime-time. I will be *thrilled* to be proven wrong.
>>did you use the repo that someone created above to get the error?<<
That repo is my project (sans the node_modules branch, per your request above) in whatever state it was in on the day the repo was created.
>>Can you run the following<<
Sure, and here are the results:
PS C:\projects\quicklinks> node -v
v6.10.2
PS C:\projects\quicklinks> npm -v
3.10.10
PS C:\projects\quicklinks> npm list -g --depth=0
C:\Users\joseph_ackerman\AppData\Roaming\npm
+-- Pernille-Eskebo/generator-sharepoint@1.0.2
+-- gulp@3.9.1
`-- yo@1.8.5Thanks for chiming in. Hope this info points to something. Given that I can see that my <user>\appdata\roaming folder is somehow involved, is it possible that some special path configuration is getting set by npm when I install other libraries but is not getting saved (or is getting removed) so that it is not picked up when I reboot?
Footnote: Interestingly, I had a three-hour screen share session with another developer on my team yesterday just to put another pair of eyes on it, and he and I went through the process of setting up his machine for SPFx development. He built his first web part no problem, just like me. Added jquery and sp-pnp-js just like me. Everything went fine, just like me. He then rebooted his machine and went back to the project folder and did a gulp serve, and got the "sp-pnp-js not found" error. Unfortunately, just like me.