React项目执行npm start报错：Cannot set property closed of #<Readable>

在React项目中执行npm start本地启动服务时出现如下报错，此前运行正常，新建项目也遇到相同问题：

TypeError: Cannot set property closed of #<Readable> which has only a getter
    at FsReadStream.close (D:\Nageeb\Me\مشاريعي\BravoB2C(5)\Front-end\front-end\node_modules\memfs\lib\volume.js:2047:17)
    at FsReadStream._destroy (D:\Nageeb\Me\مشاريعي\BravoB2C(5)\Front-end\front-end\node_modules\memfs\lib\volume.js:2032:10)      
    at _destroy (node:internal/streams/destroy:109:10)
    at class_1.destroy (node:internal/streams/destroy:71:5)
    at class_1.<anonymous> (D:\Nageeb\Me\مشاريعي\BravoB2C(5)\Front-end\front-end\node_modules\memfs\lib\volume.js:1962:22)        
    at class_1.emit (node:events:525:35)
    at endReadableNT (node:internal/streams/readable:1359:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on class_1 instance at:
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

Node.js v18.12.0

问题原因 #

这个错误是memfs库与Node.js 18.x版本不兼容导致的。Node.js 18.x开始将Readable流的closed属性改为只读的getter，而旧版本的memfs尝试直接对该属性赋值，触发了类型错误。新建项目也出现问题，大概率是脚手架（如create-react-app）间接引入了旧版memfs，或者全局依赖存在冲突。

解决方案 #

• 升级memfs到兼容版本
  卸载当前版本并安装最新版：

  npm uninstall memfs
  npm install memfs --save-dev
  

  （如果memfs是生产依赖，去掉--save-dev参数）

• 强制指定兼容版本
  如果升级后仍有问题，直接在package.json中锁定memfs到3.4.12及以上版本（该版本修复了Node 18的兼容性问题）：

  1. 在package.json中添加或修改：

     "overrides": {
       "memfs": "^3.4.12"
     }
     

  2. 执行npm install重新安装依赖

• 清理缓存并重装依赖
  清理npm缓存并重新安装所有依赖，避免缓存中的旧版本影响：

  npm cache clean --force
  # Windows系统执行：rmdir /s /q node_modules && del package-lock.json
  rm -rf node_modules package-lock.json
  npm install
  

• 检查间接依赖的memfs版本
  用以下命令查看依赖树，定位哪个包引入了旧版memfs：

  npm ls memfs
  

  找到对应包后，升级该包到最新版本即可解决间接依赖的问题。

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