I'm attempting to configure a newly scaffolded SPFx 1.4.1 solution (for SharePoint Serve 2019) to work with node 16. Out of the box they are not compatible. I have a working solution with Node 10.24.1 but I'm trying to be able to utilize React 18 and the minimum requirement for Node is version 16. On the Microsoft documentation page they specify that "SPFx v1.4.1 is also supported on Node.js v12, v14 and v16 (v12.18.1, v14.17.1 and v16.15.0 to be specific), though there are incompatible issues (gulp v3 is incompatible with Node v12+, and node-sass v4 requires Node.js v14 or below)." and provide workaround instructions:
"The workaround to resolve them is to specify the version of the graceful-fs component as v4+, and to replace node-sass with sass. You can manually modify package-lock.json or npm-shrinkwrap.json and then re-run npm install. Or you can create a new *.js file located in the root folder of your project, copy the following code into that file, run node your_new_js_file and re-run npm install.
const fs = require('fs');
const lockedVersionFile = 'package-lock.json';
// const lockedVersionFile = 'npm-shrinkwrap.json';
const lockedVersionJson = JSON.parse(fs.readFileSync(lockedVersionFile));
if (lockedVersionJson.packages) {
const vinylFSJson = lockedVersionJson.packages["node_modules/vinyl-fs"];
if (vinylFSJson && vinylFSJson["dependencies"] && vinylFSJson["dependencies"]["graceful-fs"]) {
vinylFSJson["dependencies"]["graceful-fs"] = "npm:[email protected]";
}
const gulpSassJson = lockedVersionJson.packages["node_modules/gulp-sass"];
console.log(gulpSassJson);
if (gulpSassJson && gulpSassJson["dependencies"] && gulpSassJson["dependencies"]["node-sass"]) {
gulpSassJson["dependencies"]["node-sass"] = "npm:[email protected]";
}
}
fs.writeFileSync(lockedVersionFile, JSON.stringify(lockedVersionJson, undefined, 2));
Link to the MS page this code came from.
The specifics of how exactly to implement this isn't specified. The versions of my dev environment packages are listed below along with the steps I've tried thus far. I believe the main issue I'm facing is that after following the workaround the overwritten dependencies for graceful-fs and node-sass are listed as "invalid" when looking at the dependcy tree.
Dev Environment details
Using Nvm to manage multiple versions of node
Node 10.24.1 (current working version of node that compiles successfully)
gulp-cli: 2.3.0
yo: 2.0.6
@microsoft/generator-sharepoint: 1.10.0
Node 16.15.0 (target version of Node, specified by MS)
gulp-cli: 2.3.0
yo: 2.0.6
@microsoft/generator-sharepoint: 1.10.0
I've noticed that if I try to run npm install with Node 16.15.0 right off the bat I get an error about a mismatch in the binary which makes sense since there are intrinsic compatibility issues so that leads me to initially start with an install using 10.24.1 and then flipping over to the higher version of Node. Below are the steps I've taken to get the furthest. The .js files mentioned in the steps are outlined at the bottom.
Using Node 10.24.1 run
npm install- Success with installing all initial packages
using Node 10.24.1 ran
node depFix.js- Confirmed that the changes to dependencies were modified in package-lock.json
Using Node 10.24.1 ran
npm installagainSwitched to Node 16 using
nvm use 16.15.0Ran
node depFix16.jsConfirmed that the changes were made in package-lock.json
-
$ node depFix16.js --- vinylFSJson --- { defaults: '^1.0.0', 'glob-stream': '^3.1.5', 'glob-watcher': '^0.0.6', 'graceful-fs': '^3.0.0', mkdirp: '^0.5.0', 'strip-bom': '^1.0.0', through2: '^0.6.1', vinyl: '^0.4.0' } New { defaults: '^1.0.0', 'glob-stream': '^3.1.5', 'glob-watcher': '^0.0.6', 'graceful-fs': 'npm:[email protected]', mkdirp: '^0.5.0', 'strip-bom': '^1.0.0', through2: '^0.6.1', vinyl: '^0.4.0' } --- gulp-sass --- { 'gulp-util': '^3.0', 'lodash.clonedeep': '^4.3.2', 'node-sass': '^4.2.0', through2: '^2.0.0', 'vinyl-sourcemaps-apply': '^0.2.0' } NEW { 'gulp-util': '^3.0', 'lodash.clonedeep': '^4.3.2', 'node-sass': 'npm:[email protected]', through2: '^2.0.0', 'vinyl-sourcemaps-apply': '^0.2.0' }
Using Node 16.15.0 ran
npm installRan gulp trust-dev-cert (to test if things were working)
Error that indicates that the packages overwrite is not taking
-
$ gulp trust-dev-cert ReferenceError: primordials is not defined at fs.js:47:5 at req_ (C:\Users\dharne03\source\SP19React16\node_modules\natives\index.js:143:24) at Object.req [as require] (C:\Users\dharne03\source\SP19React16\node_modules\natives\index.js:55:10) at Object.<anonymous> (C:\Users\dharne03\source\SP19React16\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (C:\Users\dharne03\source\SP19React16\node_modules\vinyl-fs\node_modules\graceful-fs\graceful-fs.js:3:27) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005: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
If I list the dpenecy tree I can clearly see that it's not happy with the overrides that were just implemented:
$ npm ls graceful-fs
[email protected] C:\Users\dharne03\source\SP19React16
├─┬ @microsoft/[email protected]
│ ├─┬ @microsoft/[email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │ └── [email protected] deduped
│ │ │ └── [email protected] deduped
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ @microsoft/[email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected] invalid: "npm:[email protected]" from node_modules/gulp-sass
│ │ └─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ @microsoft/[email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ @microsoft/[email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ @microsoft/[email protected]
│ │ └─┬ @microsoft/[email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ @microsoft/[email protected]
│ └─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└─┬ [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
└── [email protected] invalid: "npm:[email protected]" from node_modules/vinyl-fs
npm ERR! code ELSPROBLEMS
npm ERR! invalid: [email protected] C:\Users\dharne03\source\SP19React16\node_modules\vinyl-fs\node_modules\graceful-fs
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\dharne03\AppData\Local\npm-cache\_logs\2024-01-18T18_17_12_718Z-debug-0.log
I'm not sure how to properly implement the overrides that MS is suggesting and I'm a little unfamiliar with the syntax where there's an "npm" prfix for a version.
npm:[email protected]
*Note on the files below. I ended up modifying the workaround code that MS provided because prior to running npm install using Node 16 the way the files are referenced package-lock.json and their names ("vinyl-fs" vs "node_modules/vinyl-fs") were different.
depFix.js
const fs = require('fs');
const lockedVersionFile = 'package-lock.json';
// const lockedVersionFile = 'npm-shrinkwrap.json';
const lockedVersionJson = JSON.parse(fs.readFileSync(lockedVersionFile));
if (lockedVersionJson.dependencies) {
const vinylFSJson = lockedVersionJson["dependencies"]["vinyl-fs"];
console.log("--- vinylFSJson ---");
console.log(vinylFSJson["dependencies"]["graceful-fs"]);
if (vinylFSJson && vinylFSJson["dependencies"] && vinylFSJson["dependencies"]["graceful-fs"]) {
console.log("vinalFS Hit");
vinylFSJson["dependencies"]["graceful-fs"] = "npm:[email protected]";
}
const gulpSassJson = lockedVersionJson["dependencies"]["gulp-sass"];
console.log("--- gulp-sass ---");
console.log(gulpSassJson);
if (gulpSassJson && gulpSassJson["requires"] && gulpSassJson["requires"]["node-sass"]) {
console.log("node-sass Hit.");
gulpSassJson["requires"]["node-sass"] = "npm:[email protected]";
}
}
fs.writeFileSync(lockedVersionFile, JSON.stringify(lockedVersionJson, undefined, 2));
depFix16.js
const fs = require('fs');
const lockedVersionFile = 'package-lock.json';
// const lockedVersionFile = 'npm-shrinkwrap.json';
const lockedVersionJson = JSON.parse(fs.readFileSync(lockedVersionFile));
if (lockedVersionJson.dependencies) {
const vinylFSJson = lockedVersionJson["packages"]["node_modules/vinyl-fs"];
console.log("--- vinylFSJson ---");
console.log(vinylFSJson["dependencies"]);
if (vinylFSJson && vinylFSJson["dependencies"] && vinylFSJson["dependencies"]["graceful-fs"]) {
vinylFSJson["dependencies"]["graceful-fs"] = "npm:[email protected]";
console.log("New");
console.log(vinylFSJson["dependencies"]);
}
const gulpSassJson = lockedVersionJson["packages"]["node_modules/gulp-sass"];
console.log("--- gulp-sass ---");
console.log(gulpSassJson["dependencies"]);
if (gulpSassJson && gulpSassJson["dependencies"] && gulpSassJson["dependencies"]["node-sass"]) {
gulpSassJson["dependencies"]["node-sass"] = "npm:[email protected]";
console.log("NEW");
console.log(gulpSassJson["dependencies"])
}
}
fs.writeFileSync(lockedVersionFile, JSON.stringify(lockedVersionJson, undefined, 2));