React项目npm start时因代码错误触发服务崩溃：RangeError: Array buffer allocation failed

我太懂这种闹心的情况了——平时用npm start启动React项目都顺顺利利，编译一次过，但只要代码里写错点东西，不仅Webpack会提示“webpack compiled with 1 error”，连开发服务器直接就崩了，弹出RangeError: Array buffer allocation failed这个奇怪的错误，得重新启动服务才能继续开发，效率直接打折扣。

先把你遇到的错误场景再明确下：

• 正常启动：npm start执行后，项目编译成功，服务正常运行
• 出错触发：代码中出现语法/逻辑错误时，服务直接崩溃，抛出以下错误日志：

node:internal/buffer:961
super(bufferOrLength, byteOffset, length);
^
RangeError: Array buffer allocation failed

下面给你几个亲测有效的解决思路，你可以挨个试试：

可能的修复方案 #

• 优先升级Node.js到LTS稳定版：这个Array buffer allocation failed错误很多时候是旧版本Node的内存分配bug导致的，建议直接升级到v18.x或v20.x的LTS版本，大部分用户升级后这个问题就自动消失了。
• 给Node增加内存限制：如果升级Node后还是不行，可以在启动脚本里手动指定Node的最大内存，修改package.json里的start命令：

  "scripts": {
    "start": "node --max-old-space-size=4096 node_modules/react-scripts/scripts/start.js"
  }
  

  这里的4096代表分配4GB内存给Node进程，你可以根据自己电脑的配置调整，比如8GB内存的机器可以设为8192。
• 先解决代码里的源头错误：Webpack已经提示有1个编译错误，这个崩溃其实是代码错误引发的连锁反应，先仔细看Webpack的错误提示，把代码里的语法/逻辑问题修复掉，再观察服务还会不会崩溃——毕竟有时候是错误代码导致了内存溢出，进而触发了这个异常。
• 清除开发缓存：有时候项目缓存文件损坏会引发各种奇怪的问题，执行以下命令清除缓存后再重启服务：

  rm -rf node_modules/.cache
  npm start
  

• 调整react-scripts版本（Create React App项目适用）：如果你是用Create React App搭建的项目，react-scripts版本和Node版本不兼容也可能出现这个问题，试试升级到最新稳定版：

  npm install react-scripts@latest
  

  或者降级到比较稳定的v5.0.1版本：

  npm install react-scripts@5.0.1
  

备注：内容来源于stack exchange，提问作者Sumit Kumar