3

I get following error when deploying app with react-snap to Heroku.

puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory

I applied all the changes, set all the buildpacks.

I even could react the the first deploy without "postbuild": "react-snap" line, it workes.

But then adding lines here, will fail again. What now?

"reactSnap": {
    "cacheAjaxRequests": true,
    "inlineCss": true,
    "http2PushManifest": true,
    "puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"]
  }

"postbuild": "react-snap"
János
  • 32,867
  • 38
  • 193
  • 353

1 Answers1

2

I struggled with this issue for 4 hours. Googled a lot of solutions but no one worked for me. And finally I've got it !!! (Actually, it is now at this very moment)

Heroku log:

   > individual-claims@0.1.0 postbuild /tmp/build_3cc3bffa_
   > react-snap
   
   ✅  crawled 1 out of 1 (/)

Done! I am happy.

Solution:

  1. Go to Heroku Settings -> Buildpacks -> Add buildpack
  2. Add: https://github.com/jontewks/puppeteer-heroku-buildpack.git

IMPORTANT !!! Make sure this is the first one. That's the common fault. When making React on Heroku you already (I suppose) have https://github.com/mars/create-react-app-buildpack.git But react-buildpack should be the second one. Nobody says it.

  1. Redeploy and have fun.

Note: After a lot of struggling I've made some changes to my application (I don't think this is really important, however)

  1. in package.json
     "engines": {
          "node": ">=14.12.0",  // Just to make sure I have the latest and the greatest 
          "npm": ">=6.14.8"
        },
  
   "devDependencies": {
        ...
       "prettier": "^2.1.2",   // Just to make sure I have the latest and the greatest 
        ...
   }

  1. Heroku stack: heroku-18 . It's the default and you have it unless your app is old.

  2. I don't have these lines:

"cacheAjaxRequests": true,
"inlineCss": true,
"http2PushManifest": true,

I've heard that "inlineCss": true, may cause a problem

Albert Lyubarsky
  • 438
  • 1
  • 7
  • 15