With the latest release of MacBook Pros, I know a lot of SPFx developers are considering an upgrade. My previous MacBook Pro was showing its age, so I thought now was a good time. My new shiny MacBook Pro arrived last night and one of the first things I tried to do is get node.js and the SPFx build tools installed. I ran into a few hiccups and here is how I got around them.
Installing Node.js
There’s no shortage of ways to install node.js. Since SPFx has specific requirements though I went to the web site and found the previous releases page and typed in 14 as that is what is currently supported. Node 17 has a combined X64 / ARM install package but we can’t use that yet with SPFx.
Installing SPFx
I followed the usual SPFx Installation instructions by executing the following.
npm install gulp-cli yo @microsoft/generator-sharepoint --global
This install gulp, yo, and then the SharePoint generator for yo. I had no issue installing gulp and yo, but the generator was where the issue started. EACCES permission denied errors.
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/node-sass/.node-gyp'
gyp ERR! System Darwin 21.0.1
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/node-sass
gyp ERR! node -v v14.18.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
It doesn’t surprise me it’s an issue with node-gyp / node-sass. I’m pretty sure those packages have some native code in them, but I don’t know for sure. They have definitely caused me issues in the past. You might try to run the command again with sudo. Don’t do that, it won’t work. Before, I bought the M1, I did some research on how Node.js worked on it and I stumbled upon this blog post. This gave a few commands to try.
First, you can see what architecture node is running by running:
$ node -p process.arch
arm64
Ok, so it’s running on arm64. That’s probably the issue. Now we need to switch to the x86_64 architecture, so run:
$ arch -x86_64 zsh
That will open a new zsh using the x64 architecture. You can validate that by running, the process.arch command again. Now, try to install @microsoft/generator-sharepoint again and it should work.
Some of this is a bit confusing because arch and node call the environments different things. For example, arch calls it x86_64 and then you run arch again and it says i386 all while node says x64. Confusing right? The good thing is you shouldn’t have to worry about the architecture for most SPFx development tasks. I think the only time you will need to worry about it is when you run the generator again.
Comparing Performance
I was curious about the performance of SPFx build times between my old 2016 MacBook Pro and the new 2021 M1 Max MacBook Pro, so I recorded a quick video. In initial tests, gulp serve was about 1 second faster consistently on the M1 Max. However, bundle time varied with either computer coming in faster. Some of this may be due to the emulation occurring. I’ll continue to try things out and see how they do.
Corey Roth's Blog 