React前端服务崩溃：node:internal/buffer:959 RangeError问题求助

我用Strapi做后端、React做前端搭建电商网站，导航页面时触发以下错误：

node:internal/buffer:959
super(bufferOrLength, byteOffset, length);
^
RangeError: Array buffer allocation failed
at new ArrayBuffer ()
at new Uint8Array ()
at new FastBuffer (node:internal/buffer:959:5)
at createUnsafeBuffer (node:internal/buffer:1062:12)
at Function.allocUnsafeSlow (node:buffer:384:10)
at read (C:\Users\lenoa\Documents\ELN WEB\Projets en cours\freedom-x\frontend\node_modules\webpack\lib\serialization\FileMiddleware.js:597:32)
at C:\Users\lenoa\Documents\ELN WEB\Projets en cours\freedom-x\frontend\node_modules\webpack\lib\serialization\FileMiddleware.js:657:7
at C:\Users\lenoa\Documents\ELN WEB\Projets en cours\freedom-x\frontend\node_modules\graceful-fs\graceful-fs.js:362:16
at FSReqCallback.oncomplete (node:fs:188:23)

解决建议 #

• 清理Webpack缓存：
  删除前端项目下的node_modules/.cache/webpack目录，或者直接删除node_modules文件夹后重新执行npm install，再重启开发服务。Webpack的文件中间件读取损坏/过大的缓存文件时容易触发内存分配失败。
• 提升Node.js内存限制：
  修改项目启动命令，给Node.js分配更多内存。如果用create-react-app，把package.json里的start命令改成：

  "start": "node --max-old-space-size=4096 react-scripts start"
  

  数值可根据实际情况调整（比如8192对应8GB内存），避免大文件处理时内存不足。
• 排查超大资源文件：
  检查项目中是否有意外引入的超大静态文件（比如几GB的图片、视频），这类文件会导致Webpack读取时内存溢出。可以用webpack-bundle-analyzer插件分析打包产物，定位大体积模块并优化（比如压缩资源、按需加载）。
• 更新Webpack相关依赖：
  该错误出自Webpack的FileMiddleware模块，可能是版本bug。尝试将webpack更新到最新稳定版，同时同步更新graceful-fs等相关依赖，修复已知的内存分配问题。

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