React-snap: Unable to deploy to Heroku with create-react-app-buildpack

[jesshmusic]

When deploying I am getting this error, which actually seems to freeze the build process on Heroku:

(node:629) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Failed to launch chrome!
/tmp/build_2e66391b352738bb3c9a1b44c5632458/jesshmusic-living_music_database-ca09d15273a13f10f1a1a9e7ffd147503a55dc26/node_modules/react-snap/node_modules/puppeteer/.local-chromium/linux-499413/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
(node:629) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I have attempted to add the puppeteer build pack as described in the troubleshooting link above but it doesn't do any good. Does anyone have a solution to get this to deploy in Heroku? If it is something I missed in the docs kindly point me in that direction.

[stereobooster]

I didn't try to deploy it to heroku, but quick googling gave me this recomendation:

"puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"]

Did you tried it?

PS. obviously you need heroku buildpack for puppeteer

[jesshmusic]

Thanks for your help, but I still can't get it to deploy, same error. It doesn't ever download the buildpack for puppeteer, so at this point I'm confounded. Adding puppeteerArgs didn't help either, it seems like it just isn't getting the buildpack at all, which is odd. Much more likely that this issue is just me not knowing what I'm doing with this kind of deploy.

[stereobooster]

What heroku buildpacks says?

[jesshmusic]

Here are the build packs returned from the CLI command:

1. https://github.com/jontewks/puppeteer-heroku-buildpack.git
2. https://github.com/mars/create-react-app-buildpack.git

[stereobooster]

Looks as it suppose to be. Maybe crosspost the issue to those buildpack repositories?..

1. https://github.com/jontewks/puppeteer-heroku-buildpack/issues/7

[stereobooster]

Will close this for now. Feel free to reopen

[stereobooster]

create-react-app-buildpack - uses some magic with multi buildpack. Have you tried packages inside directly?

• https://github.com/heroku/heroku-buildpack-static
• https://github.com/heroku/heroku-buildpack-nodejs

UPD: my try https://github.com/stereobooster/an-almost-static-stack/pull/7

[jamesmosier]

@stereobooster were you able to get your heroku example working?

I got puppeteer running on my heroku instance but am receiving a nondescript error:

(Also if it would be better, I can open up a new issue for this, but Error: i didn't seem like enough to go on)

[stereobooster]

@jamez14 yes my example worked. You can clone repo, checkout branch and try it. I didn't push it to the master because Heroku uses HTTP1.

Pagerror - means that error happened inside the headless browser, what would you see in DevTools in chrome. Try build with react-snap, to see if this Heroku specific or not. You can open separate issue if you can provide reproducible demo, otherwise I can not do much about it

[jamesmosier]

I haven't done any further testing, but I mentioned previously that I was not able to build/deploy with Heroku. I then forked react-snap and manually added the puppeteer args and then react-snap succeeded on Heroku. This might just be because of my project setup, but regardless someone else might find this useful.

[stereobooster]

I'm surprised that following code didn't help you. But you figured it out anyway so 👍

"reactSnap": {
   "puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"]
}

[heshamelmasry77]

hey so i tried to do the same what you guys did but i still can't deploy at all
i added this to my package.json

"reactSnap": {
  "puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"],
  "concurrency": 1,
  "inlineCss": false,
  "puppeteerExecutablePath": "/usr/bin/chromium-browser"
} 

and here is my log

       yarn global add serve
       serve -s build

       $ react-snap
/bin/sh: 1: react-snap: not found
error Command failed with exit code 127.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/ 

[stereobooster]

Main part of the log which you want to pay attention is:

/bin/sh: 1: react-snap: not found

Did you add react-snap to the dependencies? If issue is not solved, please open new ticket (to not spam people in this thread) and post contents of package.json

[heshamelmasry77]

@jamez14
so i have edited the same you told me

 "reactSnap": {
    "puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"],
    "concurrency": 1,
    "inlineCss": false,
    "puppeteerExecutablePath": "/usr/bin/chromium-browser"
  }

 "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "yarn run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "serve": "yarn npm-run-all -p watch-css start-js",
    "heroku-postbuild": "yarn --production=true && yarn run build",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "flow": "flow",
    "postbuild": "react-snap"
  }



md5-1eaad8930f40f251a2bea434e2f01382



yarn global add serve
       serve -s build

       $ react-snap
/bin/sh: 1: react-snap: not found
error Command failed with exit code 127.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

[stereobooster]

This is what I got

git clone https://github.com/stereobooster/an-almost-static-stack.git
cd an-almost-static-stack
git checkout react-snap-heroku
heroku create
heroku config:set NPM_CONFIG_PRODUCTION=false
heroku buildpacks:add https://github.com/jontewks/puppeteer-heroku-buildpack.git
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git
git push heroku react-snap-heroku:master -f

...

remote:        $ react-snap && yarn run generate-sw && yarn run generate-appcache
remote:        (node:432) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Failed to launch chrome!
remote:        /tmp/build_63bedf583edd7573cdc7d8cc8546b619/node_modules/puppeteer/.local-chromium/linux-555668/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory
remote:
remote:
remote:        TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
remote:
remote:        (node:432) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I guess you need heroku config:set NPM_CONFIG_PRODUCTION=false, because react-snap listed as devDependecy.

About issue with libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory you need to ask in jontewks/puppeteer-heroku-buildpack. It was working sometimes ago.

[heshamelmasry77]

@stereobooster
I disabled set the config to false like how you said and now i get the same error you get.

[heshamelmasry77]

solution for this
https://github.com/jontewks/puppeteer-heroku-buildpack/issues/13#issuecomment-388307071