Vue项目GitHub Actions执行npm run build报JSON解析语法错误

问题描述 #

在GitHub Actions工作流执行npm run build时出现以下错误：

SyntaxError: Unexpected token  in JSON at position 182704
    at JSON.parse (<anonymous>)
    at /home/runner/work/IS212-g4t1/IS212-g4t1/frontend/node_modules/thread-loader/dist/WorkerPool.js:144:30
    at Socket.onChunk (/home/runner/work/IS212-g4t1/IS212-g4t1/frontend/node_modules/thread-loader/dist/readBuffer.js:40:9)
    at Socket.emit (node:events:517:28)
    at addChunk (node:internal/streams/readable:335:12)
    at readableAddChunk (node:internal/streams/readable:308:9)
    at Readable.push (node:internal/streams/readable:245:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Node.js v18.18.0
npm verb exit 1
npm verb code 1
Error: Process completed with exit code 1.

本地执行npm run build和Vercel部署时均无此问题。

可行解决方案 #

• 禁用thread-loader：错误来自thread-loader的WorkerPool处理JSON时的通信异常，可在vue.config.js中修改配置移除该loader：

  module.exports = {
    configureWebpack: config => {
      config.module.rules.forEach(rule => {
        if (rule.use) {
          rule.use = rule.use.filter(loader => 
            loader !== 'thread-loader' && !(loader.loader && loader.loader.includes('thread-loader'))
          );
        }
      });
    }
  };
  

• 锁定依赖版本：GitHub Actions环境的依赖安装可能与本地/Vercel存在版本差异，在package.json中明确指定thread-loader版本：

  "devDependencies": {
    "thread-loader": "3.0.4"
  }
  

  重新生成package-lock.json并提交至仓库。

• 增加构建内存限制：GitHub Actions Runner内存可能低于本地，低内存环境下thread-loader易出现数据截断，修改package.json中的build脚本：

  "scripts": {
    "build": "node --max-old-space-size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build"
  }
  

• 清理缓存后构建：在GitHub Actions工作流步骤中添加缓存清理操作：

  - name: Clean dependencies and build cache
    run: |
      rm -rf node_modules
      rm -rf package-lock.json
      rm -rf dist
      npm cache clean --force
  

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