Configuring Dev environment for SP2016,SP2019 on prem and M365

Question

I have several clients who are needing to migrate from SP2016 to SP2019 over the next 2 months.

We will be setting up a hybrid environment for these clients where Intranet & Extranet requirements will be addressed through M365 & Teams while all public-facing anonymous services will continue to be satisfied through traditional SP2019 on prem.

I, therefore, need to develop webparts that can function in each of these environments.

My understanding of SPFx is limited while I am very comfortable with programming concepts as well as working with the code once I have reached that stage, albeit it from a very generic point of view.

I have been struggling to just the development environment to work! Between the gulp errors, the deprecation warnings, the failure to get a simple "Hello World" empty webpart to function has been extremely frustrating.

Steps to test: I've done the following:

1. Installed NPM Version 7.20.6
2. Installed GULP - CLI version: 2.3.0 & Local version: 3.9.1
3. Installed Yo -@microsoft/generator-sharepoint@1.12.1
4. Created a c:\Dev\HelloUniverse folder
5. Ran yo @Microsoft/SharePoint
6. Selected SP2016 onwards
7. Accepted all the defaults
8. Ran Gulp Serve

Got the following:

ReferenceError: primordials is not defined
at fs.js:45:5
at req_ (C:\dev\HelloUniverse\node_modules\natives\index.js:143:24)
at Object.req [as require] (C:\dev\HelloUniverse\node_modules\natives\index.js:55:10)
at Object.<anonymous> 
   (C:\dev\HelloUniverse\node_modules\vinyl-fs\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> 
 (C:\dev\HelloUniverse\node_modules\vinyl-fs\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)
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

I now need to start troubleshooting this :(

I need to be able to configure the development environment for each version of SharePoint, I get that, but what is the installation instruction for each of the variables then? How do I setup the environment for SP2016 to test and run, then how do I repeat this exercise for the alternate environments?

I have re-run the Yo statement for M365 Online only and it works as expected, but there are errors for either SP2016 or SP2019 on-prem options.

Answer 1

My guess is that the error you are getting is due to node and npm version mismatch with SPFx yeoman generator.

I would suggest trying out NVM to setup a dedicated sandbox for each SharePoint environment you want to support:

https://github.com/coreybutler/nvm-windows

https://github.com/nvm-sh/nvm

Also, check the node version supported for each release of SPFx and configure/install accordingly in NVM: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/release-1.12.1