Pnp spfx Breadcrumb webpart got "gulp serve ReferenceError: primordials is not defined" error in the new SPFX v1.12

Question

The Breadcrumb pnp web part with my augmented custom codes broke after I updated to SPFx v1.12.0 as in this article (https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.12.0). The web part jams on old node v10.18.0 and new 12.13.0. Suggestions? I have: Node v12.13.0 Gulp v4.0.2 TypeScript to v3.7 (via @microsoft/rush-stack-compiler-3.7 v0.2.3) React NPM packages (react & react-dom) v16.9.0. Office UI Fabric React NPM package / Microsoft Fluent UI (office-ui-fabric-react) to v7.156.0. Here is the error: ![80875-image.png][1] [1]: /api/attachments/80875-image.png?platform=QnA

Answer 1

Hi,

Need to upgrade all "@microsoft/packagename" in "package.json" to "1.12" instead of "1.11" as 1.11 didn't support Node.js v12 x:

Then delete "node_modules" folder, run "npm install" to redownload and install all the packages:

Then replace the "gulpfile.js" with the code below:

'use strict';  
  
const build = require('@microsoft/sp-build-web');  
  
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);  
  
var getTasks = build.rig.getTasks;  
build.rig.getTasks = function () {  
  var result = getTasks.call(build.rig);  
  
  result.set('serve', result.get('serve-deprecated'));  
  
  return result;  
};  
  
build.initialize(require('gulp'));  

80829-gulpfile.txt

Then run "gulp serve" it should be working to build the solution.

Thanks
Best Regards

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

The recommendation from Microsoft is to stick with SPFx 1.11 as 1.12 has some serious issues.

https://twitter.com/vesajuvonen/status/1374620639080894464