Forum Discussion

Joseph Ackerman's avatar
Joseph Ackerman
Iron Contributor
Apr 19, 2017

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...
  • Luis Mañez's avatar
    Luis Mañez
    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's avatar
Luis Mañez
MVP
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

  • Joseph Ackerman's avatar
    Joseph Ackerman
    Iron Contributor
    Apr 28, 2017

    Will try it.  Thanks Luis.

  • Joseph Ackerman's avatar
    Joseph Ackerman
    Iron Contributor
    Apr 28, 2017

    >>my theory that is something related with the framework installed. Did you try to re-install the entire spfx?<<

     

    I started fresh and reinstalled everything, and now plain vanilla gulp serve with just the imports statements for the jquery and sp-pnp-js libraries seems to be working.  Good call on the reinstall of the SPFx.

     

    Of course now I've got some other issues...but that needs to be its own thread ;)

     

    Thanks for your help.

  • Joseph Ackerman's avatar
    Joseph Ackerman
    Iron Contributor
    Apr 30, 2017

    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.

    • Andrew Connell's avatar
      Andrew Connell
      MVP
      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 Ackerman's avatar
        Joseph Ackerman
        Iron Contributor
        May 02, 2017

        >>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.5

         

        Thanks 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.

Resources