mldangelo / personal-site

My personal website - built with React, React-Router, React-Snap for Static-Export, and GitHub Pages.
https://mldangelo.com
MIT License
1.27k stars 853 forks source link

Error -86 on npm run predeploy using react-snap with Puppeteer #536

Closed anh0001 closed 2 weeks ago

anh0001 commented 3 months ago

Running npm run predeploy results in an error related to Puppeteer, spawned by react-snap. This prevents the static site generation process and shows an Unknown system error -86 related to the spawn call in child_process.

Steps to Reproduce

  1. Clone the repo https://github.com/mldangelo/personal-site
  2. Install dependencies using npm install
  3. Run npm run predeploy
  4. See error:
Error: spawn Unknown system error -86
    at ChildProcess.spawn (node:internal/child_process:421:11)
    at Object.spawn (node:child_process:761:9)
    at Launcher.launch (/Users/anhar/Codes/personal-site/node_modules/puppeteer/lib/Launcher.js:132:40)
    at async crawl (/Users/anhar/Codes/personal-site/node_modules/react-snap/src/puppeteer_utils.js:188:19)
    at async run (/Users/anhar/Codes/personal-site/node_modules/react-snap/index.js:647:3) {
  errno: -86,
  code: 'Unknown system error -86',
  syscall: 'spawn'
}

Environment

npm ls puppeteer shows:

personal-site@4.0.0 /Users/anhar/Codes/personal-site
└─┬ react-snap@1.23.0
  ├─┬ minimalcss@0.8.1
  │ └── puppeteer@1.20.0 deduped
  └── puppeteer@1.20.0
dosubot[bot] commented 3 months ago

The error you're encountering, "Unknown system error -86", is likely due to a binary compatibility issue on macOS, especially if you're using an Apple Silicon Mac (M1/M2 chip). This can happen when trying to run arm64 binaries on x86_64 architecture without Rosetta 2 or vice versa. Here's how to address the issue:

  1. Check Node.js Version: Ensure your Node.js version (v20.12.2) is compatible with the project requirements. If necessary, switch to a compatible version using a version manager like nvm.

  2. Update Puppeteer: The version of Puppeteer (1.20.0) might not be fully compatible with your system. Consider updating Puppeteer or react-snap to a version that supports your macOS and architecture.

  3. Use Rosetta 2 for Intel Binaries: If you're on an Apple Silicon Mac, try running your terminal under Rosetta 2 to ensure compatibility with Intel-based binaries. You can do this by duplicating your Terminal app, renaming it (e.g., Terminal Rosetta), and selecting "Open using Rosetta" in the Get Info window.

  4. Reinstall Node Modules: Sometimes, reinstalling your node modules (npm install or npm ci) can resolve hidden conflicts or issues with binary installations.

  5. Puppeteer Configuration: Verify if there are any Puppeteer-specific configurations needed for macOS, such as setting the PUPPETEER_EXECUTABLE_PATH to a compatible Chrome or Chromium installation.

  6. Search for Similar Issues: Check the react-snap and Puppeteer GitHub repositories for similar issues, as others might have encountered and resolved the same problem.

By following these steps, you should be able to resolve the "Unknown system error -86" and successfully run npm run predeploy.

#### Details **Sources** - [package.json](https://github.com/mldangelo/personal-site/blob/main/package.json)
**About Dosu** This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

anh0001 commented 3 months ago

Thanks it works! I installed Rosetta 2 using the command:

/usr/sbin/softwareupdate --install-rosetta --agree-to-license

This resolved the compatibility issues as you suggested. Appreciate your support!