运行电子生成器后，Puppeteer 在 React 应用程序中失败答案

【问题标题】：Puppeteer fails in React app after running electron-builder运行电子生成器后，Puppeteer 在 React 应用程序中失败
【发布时间】：2020-10-17 12:28:08
【问题描述】：

我在 react 应用程序的一些后端 js 中使用 puppeteer。

关于 puppeteer 组件的代码相当简单，并且在 yarn 内的普通开发脚本中测试应用程序时可以正常工作。可能的相关代码相当简单：

const puppeteer = require('puppeteer');
  try {
     let browser = await puppeteer.launch({headless: false, 
     executablePath: process.env.CHROMIUM_PATH,
     args: ["--no-sandbox",
            "--disable-setuid-sandbox"]
});}
  catch (error) {
    return await error;
  }

但是，当我使用 electron-builder 将项目编译为可执行文件时，我收到以下错误消息：

Error: Failed to launch the browser process! spawn 
<project directory in AppData>\node_modules\puppeteer\.local-chromium\win32\chrome-win\chrome.exe 
ENOENT TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

我认为这可能是我的依赖项有问题，但我觉得我已经尝试了所有方法

有人有什么指导吗？

.local-chromium 文件摘要：

.local-chromium
  |win32
    |chrome-win
      |locales
      |MEIPreload
      |swiftshader
      |files within chrome-win

Files within chrome-win include:
-chrome.exe
-chrome_proxy.exe
-chrome_pwalauncher.exe
-chrome.dll
-Other PAK files, and smaller applications

.local-chromium 或 win32 中除了子目录之外没有任何内容

【问题讨论】：

标签： node.js reactjs puppeteer electron-builder

【解决方案1】：

正如 sebasaenz 所建议的，这是 puppeteer 访问 Chromium 的问题。我查看了未压缩的目录，但所有文件看起来都已提取。

我不知道 .local-chromium 有什么问题，所以我决定换个角度，直接将 puppeteer 引导到我的正常 chrome.exe 以自行运行。您可以使用 puppeteer.launch 中的 executablePath 参数来做到这一点：

let browser = await puppeteer.launch({executablePath: "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"})

chrome.exe 对您来说可能位于不同的位置，但我很确定我的是默认位置

这确实允许我的应用程序在打包时工作，不幸的是，这意味着如果 chrome 路径不同，它在移动到另一台机器时不会自动工作。不过，对于一个工作程序来说，这并不是最糟糕的权衡。

【讨论】：

【解决方案2】：

问题似乎与解压缩失败有关。在GitHub 上实际上有一个关于此的未解决问题。

在这种情况下，一种可能的解决方法是手动解压缩 zip 文件并将其解压缩到 chrome-win 文件夹中。

对于 Mac（GitHub 问题中的解决方法）是这样的：

unzip node_modules/puppeteer/.local-chromium/chrome-mac.zip
cp -r chrome-mac/Chromium.app/ ./node_modules/puppeteer/.local-chromium/mac-756035/chrome-mac/Chromium.app/

所以我认为在您的情况下，您应该在 win32 或 chrome-win 文件夹中查找 zip 文件并将其复制到 chrome-win 文件夹中。

【讨论】：

我记得我也看到了那个 zipfile 错误，但是我在 chrome-win 或 win32 中找不到任何压缩文件，是否知道具体需要解压缩什么文件？是chrome.exe吗？
我不确定。你能在.local-chromium分享你的文件夹结构吗？
刚刚添加了一些有关目录的信息，如果您需要更多信息，请告诉我。这可以解释为什么当我在纱线测试环境中运行我的应用程序时 puppeteer 仍然有效吗？
win32文件夹里有zip吗？我猜它适用于测试环境，因为在本地解压缩文件没有问题。
没有 zip 只是 chrome-win 目录我假设那是 zip 文件，但它似乎已提取

【解决方案3】：

我的应用安装在 resources/app.asar.unpacked 目录中。它抛出的错误是

spawn <install_directory>\win-unpacked\resources\app.asar\node_modules\puppeteer\.local-chromium\win64-856583\chrome-win\chrome.exe ENOENT

所以，在启动 puppeteer 时，我会这样做：

async function openBrowser() {
  var executablePath = 
    puppeteer
      .executablePath()
      .replace("app.asar", "app.asar.unpacked")

  const browser = await puppeteer.launch({ 
    executablePath: executablePath
  });

  return browser
}

首次通过，尚未分发给用户。尚未在 OSX 上测试。

【讨论】：

【解决方案4】：

Puppeteer 失败，因为它无法找到其可执行文件，使用下面的解决方案这对我的 Prod 和 Dev 环境都有效。


"build": {
   "asar": true,
   "asarUnpack": "node_modules/puppeteer/.local-chromium/**/*"
 }


 function getChromiumExecPath() {
    return puppeteer.executablePath().replace('app.asar', 'app.asar.unpacked');
 }

 export function createBrowser(options = {}) {
     return puppeteer.launch({
            ...options,
            executablePath: getChromiumExecPath()
      });
 }

【讨论】：