Categories
Development JavaScript SharePoint

SharePoint Framework Dev Challenges

Hello again! It’s definitely been a while since I’ve posted something. A lot has been going on with work and at home, some of which I’ll share in upcoming posts. One of the new forays I’ve made has been to look into solving some work problems using Microsoft’s SharePoint Framework. Using SharePoint Designer or InfoPath for forms has been deprecated (for a while apparently…). Microsoft developed the SharePoint Framework as a means to allow developers to create new WebParts and Extensions for both on-prem SharePoint and SharePoint Online. The framework is JavaScript-based and supports many of the popular flavors (React, etc.).

I was excited to try the new framework. I haven’t done much JavaScript in the past, so this was going to give me an opportunity to learn a couple new skills. So I went through the Getting Started tutorial on the Microsoft site….and ran into a brick wall! Really???? Node installed fine. I’m running v14.17.0 LTS. I ran the following commands to install Gulp, Yeoman, and the Yeoman SharePoint generator:

npm install gulp yo @microsoft/generator-sharepoint --global

There were several warnings about deprecations, but everything seemed to install fine. The first sign of trouble showed up when I ran the following to trust the development certificate that will be generated:

gulp trust-dev-cert

Errors galore!

ReferenceError: primordials is not defined
    at fs.js:45:5
    at req_ (/Users/aackerman/Developer/first-webpart/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/aackerman/Developer/first-webpart/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/aackerman/Developer/first-webpart/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/aackerman/Developer/first-webpart/node_modules/graceful-fs/graceful-fs.js:3:27)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
[19:40:37] Error - Unknown 
 primordials is not defined
[19:40:37] ==================[ Finished ]==================
[19:40:38] Project first-webpart version: 0.0.1
[19:40:38] Build tools version: 2.5.3
[19:40:38] Node version: v14.17.0
[19:40:38] Total duration: 1.76 s
[19:40:38] Task errors: 2

Nothing is more frustrating than to follow the given instructions and not have something work as their examples. Well, that’s why we have Google (or DuckDuckGo, or Bing, or…). I searched for the first line above and was able to track the error down to the version of Gulp that was installed. By default, Gulp 3.9.1 is installed, which has a dependency on graceful-fs 3.0.0. This version is *broken* for Node 14. Why doesn’t the Microsoft site warn users of this? Who knows. I found this GREAT post that explains the problem and gives a solid solution to fix on a project-by-project basis (which will need to be remembered, but shouldn’t cause too many issues overall). The fix is to force gulp to resolve the graceful-fs dependency on a v4 version that will work. Going with the latest, 4.2.6, actually didn’t fix it. But I did find a reference within package-lock.js to 4.1.2 that will work. So, in your package.json file, make the following addition to the “scripts” section and add the “resolutions” section as shown here:

{
  // Your current package.json
  "scripts": {
    // Your current package.json scripts
    "preinstall": "npx npm-force-resolutions"
  },
  "resolutions": {
    "graceful-fs": "^4.1.2"
  }
}

Now, you will need to re-run “npm install” within your project directory to download the updated dependencies. From here, re-running the gulp command to trust the dev cert should work fine:

[email protected] first-webpart % gulp trust-dev-cert          
Build target: DEBUG
[19:55:34] Using gulpfile ~/Developer/first-webpart/gulpfile.js
[19:55:34] Starting gulp
[19:55:34] Starting 'trust-dev-cert'...
[19:55:34] Starting subtask 'trust-cert'...
[19:55:34] Finished subtask 'trust-cert' after 64 ms
[19:55:34] Finished 'trust-dev-cert' after 65 ms
[19:55:34] ==================[ Finished ]==================
[19:55:35] Project first-webpart version: 0.0.1
[19:55:35] Build tools version: 2.5.3
[19:55:35] Node version: v14.17.0
[19:55:35] Total duration: 2.76 s

Progress! Now, all I should have to do is to run “gulp serve” to run the SharePoint Workbench and start working through the tutorials. The server starts fine and it opens my system’s default web browser, but…

I tried multiple browsers and nothing worked. All complained that the certificate couldn’t be trusted. Again, why wasn’t this part of the “Setup your Development Environment” @Microsoft? Back to Google. Found another reference that pointed out that even though you can set the “NODE_NO_HTTP2=1” environment variable, it was hit or miss. In my case, setting the environment variable didn’t work. The fix was to change the way the SharePoint Workbench was served to not run with https. Risk level for this? This is my development workstation and the server isn’t accessible anywhere outside my system. So, minimal to no risk in my opinion. You will have to evaluate and make that call on your system before you make the following change. In config/serve.js, change the following two lines to match here:

  "https": false,
  "initialPage": "http://localhost:5432/workbench",

Save the file and rerun “gulp serve”. Now your browser should open up to the SharePoint Workbench and you can proceed with your development learning.

Simple solutions overall, but not ones that I should have to spend a significant amount of time searching for and deciphering (I’m not a JavaScript developer by any means, so it took me a while to understand these changes and their implications).

I hope this helps you out. If so, please like and share! I’d love to hear your feedback. Especially since my upgrade to Gulp 4 didn’t go well (lots of new errors and changes).

**UPDATE: Received a great tip on Reddit and wanted to share. Thanks u/UglyFurbElowZ!

Leave a Reply