SPFx 1.5 npm install errors

I recently wanted to upgrade my SPFx project from 1.4 to 1.5 release.

I followed the instructions on sp-dev-docs for the upgrade (found here: https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-for-SharePoint-Framework-Package-v1.5)

But at the last step - running npm install - I got a breaking error that would not let npm install complete:

Error:

node-sass@4.9.0 install C:\testspfx\node_modules\node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-57_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-57_binding.node":

connect ETIMEDOUT 52.216.168.43:443

Timed out whilst downloading the prebuilt binary

Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

  npm config set proxy http://example.com:8080

phantomjs-prebuilt@2.1.16 install C:\testspfx\node_modules\phantomjs-prebuilt
node install.js

Considering PhantomJS found at C:\Users\xxx\AppData\Roaming\npm\phantomjs.CMD
Looks like an npm install -g on windows; skipping installed version.
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\xxx\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...

Error making request.
Error: connect ETIMEDOUT 52.216.168.43:443
at Object._errnoException (util.js:992:11)
at _exceptionWithHostPort (util.js:1014:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1186:14)

Please report this full log at https://github.com/Medium/phantomjs
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! phantomjs-prebuilt@2.1.16 install: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the phantomjs-prebuilt@2.1.16 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache_logs\2018-06-21T17_03_52_895Z-debug.log

      _=+#####!
   ###########|       .-----------------------------------.
   ###/    (##|(@)    |          Congratulations!         |
   ###  ######|   \   |    Solution tester is created.    |
   ###/   /###|   (@) |  Run gulp serve to play with it!  |
   #######  ##|   /   '-----------------------------------'
   ###     /##|(@)
   ###########|
      **=+####!

My setup:

My package.json file is as follows:

{
  "name": "dvp",
  "version": "1.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "@microsoft/sp-client-base": "~1.0.0",
    "@microsoft/sp-core-library": "~1.5.0-plusbeta",
    "@microsoft/sp-webpart-base": "~1.5.0-plusbeta",
    "@types/knockout": "3.4.55",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33",
    "knockout": "3.4.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.5.0-plusbeta",
    "@microsoft/sp-module-interfaces": "~1.5.0-plusbeta",
    "@microsoft/sp-webpart-workbench": "~1.5.0-plusbeta",
    "@types/chai": ">=3.4.34 <3 .6.0="" mocha="" types="">=2.2.33 <2 .6.0="" build="" bundle="" clean="" code="" gulp="" knockout-paging="" scripts="" test="">

Cause and workaround:

I created a new project using version 1.5 but got the same error.
So, next - I removed all packages in my package.json, deleted my node_modules folder and added them back one by one running npm install after each one to see which one was causing this issue.

I found the cause for this issue is coming from a dependency of one of the "@microsoft/sp" packages in my dev dependencies... not something I can live without.

I still can't be sure what is causing this issue but a bit of googling around I encountered a lot of people had a similar issue a few months or years back.

It seems to be something with the npm package installer causing it, and the workaround many people were using was:

npm install phantomjs-prebuilt@2.1.16 --ignore-scripts

So, I ran that command separately which completed successfully. Next I run the full npm install and what do you know! It finished successfully (with the regular list of 100+ warnings LOL)

Ran gulp, fixed a couple of lines of code that had to be changed and done. Now my project compiles and runs on SPFx 1.5

Still, this took an awful lot of time and the upgrade process is still something I fear as I have yet to have a single version upgraded without running into some npm hell like that (or worst) that just took half a day of work to fix.


Well, hope this helps someone else save some time! Good luck!

(reference github issue: https://github.com/SharePoint/sp-dev-docs/issues/2092)