Node.js v22升级后gulp-sass报ctime只读属性赋值TypeError

问题原因 #

Node.js v22对fs.Stats对象做了变更，将ctime等属性设置为只读，而你使用的gulp-sass@5.1.0内部代码中，filePush函数试图直接修改这个只读属性，导致抛出类型错误。

解决方案 #

方案1：临时降级Node.js版本 #

如果不需要Node.js v22的特性，切换回v20 LTS版本是最快的解决方式：

• 用nvm执行：nvm install 20 --lts && nvm use 20
• 或手动下载安装Node.js v20 LTS版本

方案2：替换gulp-sass为原生sass结合gulp流处理 #

放弃维护滞后的gulp-sass，直接使用sass包配合gulp基础API实现编译：

1. 卸载旧依赖：

npm uninstall gulp-sass --save-dev

2. 安装必要工具：

npm install sass gulp-sourcemaps --save-dev

3. 修改gulpfile.js代码：

const gulp = require('gulp');
const sass = require('sass');
const sourcemaps = require('gulp-sourcemaps');
const { dest, src } = gulp;
const { promisify } = require('util');
const sassRender = promisify(sass.render);

async function styles() {
  return src('../app/renderer/static/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(gulp.series(async (file) => {
      const result = await sassRender({
        file: file.path,
        includePaths: ['../app/renderer/static/scss']
      });
      file.contents = result.css;
      return file;
    })())
    .pipe(sourcemaps.write('./'))
    .pipe(dest('../app/renderer/static/css'));
}

function watch() {
  gulp.watch('../app/renderer/static/scss/**/*.scss', styles);
}

exports.styles = styles;
exports.watch = watch;
exports.default = gulp.series(styles, watch);

方案3：手动patch gulp-sass代码（临时救急，不推荐） #

如果暂时无法替换依赖，可修改node_modules/gulp-sass/index.js里的filePush函数，避免直接修改只读属性：

找到这行代码：

file.stat.ctime = new Date();

替换为：

// 复制stat对象并修改ctime，规避只读限制
file.stat = Object.assign({}, file.stat, { ctime: new Date() });

修改后保存即可运行，但依赖重装后需要重新修改。

问题背景信息 #

报错日志 #

[10:01:24] Using gulpfile D:\location\to\gulp\file\js\gulpfile.js
[10:01:24] Starting 'default'...
[10:01:24] Starting 'styles'...
[10:01:24] 'styles' errored after 218 ms
[10:01:24] TypeError: Cannot assign to read only property 'ctime' of object '#<Stats>'
    at filePush (D:\location\to\node_modules\gulp-sass\index.js:62:57)
    at D:\location\to\node_modules\gulp-sass\index.js:151:9
    at Function.call$2 (D:\location\to\node_modules\sass\sass.dart.js:118543:16)
    at render_closure0.call$1 (D:\location\to\node_modules\sass\sass.dart.js:101932:21)
    at _RootZone.runUnary$2$2 (D:\location\to\node_modules\sass\sass.dart.js:37656:18)
    at _Future__propagateToListeners_handleValueCallback.call$0 (D:\location\to\node_modules\sass\sass.dart.js:36474:51)
    at Object._Future__propagateToListeners (D:\location\to\node_modules\sass\sass.dart.js:5132:93)
    at _Future._completeWithValue$1 (D:\location\to\node_modules\sass\sass.dart.js:36338:9)
    at _AsyncAwaitCompleter.complete$1 (D:\location\to\node_modules\sass\sass.dart.js:35953:14)
    at Object._asyncReturn (D:\location\to\node_modules\sass\sass.dart.js:4918:17)
[10:01:24] 'default' errored after 226 ms

原gulpfile.js代码 #

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function styles() {
  return gulp.src('../app/renderer/static/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('../app/renderer/static/css'));
}

function watch() {
  gulp.watch('../app/renderer/static/scss/**/*.scss', styles);
}

exports.styles = styles;
exports.watch = watch;
exports.default = gulp.series(styles, watch);

当前开发依赖版本 #

{
  "gulp": "^5.0.0",
  "gulp-sass": "^5.1.0",
  "sass": "^1.76.0"
}

已尝试的无效操作 #

• 执行npm cache clean --force后重装依赖
• 更新gulp、gulp-sass、sass到最新版本
• 隔离测试移除冗余代码
• 排查除Node.js升级外的其他变更

内容的提问来源于stack exchange，提问作者andvch