当前位置：首页 > article >正文

《拿下奇怪的前端报错》序章：报错输出个数值数组Buffer(475) [Uint8Array]，我来教它说人话！

article 2024/9/20 10:15:20

作为前端开发者，你可能会遇到过一些奇奇怪怪的报错（相信我你早晚会遇到），关键是它未给出具体错误的位置，或者是一些很奇怪的信息。

我以前都是还原代码，然后找到错误的位置。或者是瞎弄一通，测试各种办法搞定，但不知道它到底是哪儿，最近觉得这样不好，于是专门开始记录啦

这篇就作为系列序章，希望大家读完有所收获

首先贴一个奇怪的报错吧，它是一个前端vue3+typescript的项目，构建的时候失败了，请看报错信息：

node:child_process:935
    throw err;
    ^
Error: Command failed: npm run build
    at checkExecSyncError (node:child_process:861:11)
    at execSync (node:child_process:932:15)
    at /home/jenkins/workspace/cloudpcadmin-voi-build/scripts/ci/bundle.cjs:117:5
    at Array.forEach (<anonymous>)
    at buildMods (/home/jenkins/workspace/cloudpcadmin-voi-build/scripts/ci/bundle.cjs:105:17)
    at Object.<anonymous> (/home/jenkins/workspace/cloudpcadmin-voi-build/scripts/ci/bundle.cjs:56:1)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Module.load (node:internal/modules/cjs/loader:1076:32) {
  status: 2,
  signal: null,
  output: [
    null,
    Buffer(475) [Uint8Array] [
       10,  62,  32,  99, 108, 111, 117, 100, 112,  99,  97, 100,
      109, 105, 110,  64,  48,  46,  48,  46,  48,  32,  98, 117,
      105, 108, 100,  10,  62,  32, 118, 117, 101,  45, 116, 115,
       99,  32,  45,  98,  32,  38,  38,  32, 118, 105, 116, 101,
       32,  98, 117, 105, 108, 100,  10,  10, 115, 114,  99,  47,
       99, 111, 109, 112, 111, 110, 101, 110, 116, 115,  47,  67,
      111, 109, 112, 117, 116, 101, 114,  78, 101, 116, 119, 111,
      114, 107,  68, 105, 115, 107,  77, 111, 100,  97, 108,  46,
      118, 117, 101,  40,
      ... 375 more items
    ],
    Buffer(0) [Uint8Array] []
  ],
  pid: 31896,
  stdout: Buffer(475) ,
  stderr: Buffer(0) [Uint8Array] []
} // 这里放出文字报错，只是希望让某些不知所措的小可爱搜索时命中错误模式

是不是一脸懵逼，它里面没有给出报错的位置，堆栈给出的都是Nodejs的核心库的位置（loader、bundler）以及构建脚本的位置。最奇怪的是，它的output和stdout是一个很大（通常）的Buffer数组，如果你是小白或者刚入前端的新人，肯定会感到手足无措：心里暗想，我的个乖乖，这啥玩意儿啊，大神才能看懂吗？如果你给以前的我来看，我也只会是使用如下的万金油策略：

前端框架问题万金油解决办法顺序 :

1. 问ChatGPT/Claude优先，其次才是国产模型（最近新增）

2. 把问题复制百度它谷歌它，最终你要么进了csdn/stackoverflow/git，要么显示找不到结果

3. 重新安装node_modules（记得先强制删除），中途出现任何报错都重装

4. 切换node版本，记得用nvm管理多版本nodejs

5. 清理构建缓存：就是项目目录下除了.git的那些，都删了

6. 后路：把当前代码复制下来，保存到别的目录，然后git迁出到可以编译成功的记录，再一个个文件的还原吧（这是最笨的办法，但基本能解决所有问题，除非你一次构建成功都没有过）

下面我们用先用传统方法分析这个报错：

1. 百度，它给出了莫名其妙的回答，因为这个错误每个人都不一样，很难找到；其它搜索引擎也差不多。

2. 通义千问：

从您提供的错误信息来看，您遇到了一个命令执行失败的问题，具体是在尝试运行 npm run build 命令时出现了错误。错误信息指出了一些关键点：

问题发生在构建（build）过程中。
错误发生在脚本文件 /home/jenkins/workspace/cloudpcadmin-voi-build/scripts/ci/bundle.cjs 的第 117 行附近。
构建脚本尝试对多个模块进行构建，这在第 105 行有体现。
错误是由 Node.js 子进程执行同步命令 (execSync) 失败导致的。

巴拉巴拉，它也只是分析出了构建脚本能够看到的位置。

为了进一步诊断问题，建议查看详细的构建日志或者尝试在本地环境中重现这个问题。如果问题依旧无法解决，您可以寻求社区的帮助，例如在 Stack Overflow 或 GitHub 上创建 issue 并附上尽可能多的相关信息。

估计很多大模型都是。然后用chatgpt-4o：

You may want to add more logging to your bundle.cjs file to print additional details, especially around the failing line. Adding logging around the execSync call may help identify the underlying issue.

If you share more details about the specific command or line at bundle.cjs:117:5, I can provide further assistance.

它依旧无法解决。

最后Claude3.5

这个错误表明在执行 npm run build 命令时出现了问题。让我们逐步分析并提供一些可能的解决方案：

1-10忽略，平平无奇，因为和别的答案差不多

11.检查 src/components/ComputerNetworkDiskModal.vue：错误信息中提到了这个文件，可能存在问题。检查这个文件的 TypeScript 类型定义。

聪明的你肯定也发现了：他给出一个vue文件src/components/ComputerNetworkDiskModal.vue，那么问题来了，从这个奇怪的报错中，怎么看出这个文件的？！！！

我强迫它解释，交出秘笈，毕竟最终我是希望看到此处的各位的都能学会。迫于我的威压，它委屈巴巴的回答了：

好的把，我将这些数字转换为了 ASCII 码。这些数字实际上是 UTF-8 编码的字节值，我们可以将它们解码为可读的文本。让我为您解码：

> cloudpcadmin@0.0.0 build > vue-tsc -b && vite build src/components/ComputerNetworkDiskModal.vue(

揭晓答案：那些数字，其实是一个ASCII码的数值表示，不要问我什么是ASCII码（去搜）。

这个问题，或者一系列的问题，以后都有解决办法了。用vscode打开那个文件，发现果然有个微不足道的类型报错，as any临时搞定，构建成功！