Puppeteer fails in React app after running electron-builder

Question

I am using puppeteer in some back-end js within a react app.

The code is fairly simple in regards to the puppeteer components and it works when testing the app in a normal development script within yarn. The likely relevant code is fairly simple:

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;
  }

However, when I use electron-builder to compile the project into an executable I get the following error message:

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

I thought it might be a problem with my dependencies, but I feel like I've tried everything

Anyone have any guidance?

.local-chromium file summary:

.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

There is nothing located in.local-chromium or win32 besides the subdirectories

Answer 1

As sebasaenz suggested, it was a problem with puppeteer accessing Chromium. I looked into the directory not being zipped but all files looked extracted.

I couldn't figure out what the issue was with.local-chromium so I decided to switch angles and just direct puppeteer to my normal chrome.exe to run itself. You can do this with the executablePath argument in puppeteer.launch:

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

chrome.exe might be in a different location for you, but I'm pretty sure mine is the default

This did allow my app to work when packaged, unfortunately it means that it won't automatically work when moved to a different machine if the chrome path is different. Not the worst trade off for a working program though.

Answer 2

Puppeteer fails because it not able to find its executable, Use bellow solution this works for me Prod as well as Dev enviroment.

"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()
      });
 }

Answer 3

It seems that the issue has to do with a failed unzipping. There's actually an open issue about this on GitHub .

A possible workaround is to manually unzip the zip file and extract it into the chrome-win folder in this case.

For Mac (the workaround in the GitHub issue) it's something like this:

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/

So I think that in your case you should look for the zip file in the win32 or chrome-win folders and copy it to the chrome-win folder.

Answer 4

My app installs with a resources/app.asar.unpacked directory. The error it was throwing was

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

So, when starting puppeteer, I do this:

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

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

  return browser
}

Works on first pass, haven't distributed to users yet. Haven't tested on OSX.