React-snap faild in postbulid when uploading to AWS Amplify

493 Views Asked by At

I`ve pushed my react project to AWS amplify with git. I installed the react-snap package for SEO reasons. When inspecting the Amplify Console, it shows that the provision step succeeded, but the building step failed. The error log shows this:Error log downloaded from AWS

Some older post on github describe the same problem that I have: https://github.com/thinkJin6/BokuNews/issues/64
I have tried out several things like adding and configuring amplify.yml file and configuring the package.json as described here:configuartion of amplify.yml for react-snap. https://github.com/puppeteer/puppeteer/issues/765
Finally I tried out some stuff from this link: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-on-aws-ec2-instance-running-amazon-linux
I enable amazon-linux-extras like this, sudo amazon-linux-extras install epel -y, and installed install Chromium like this, sudo yum install -y chromium.I used AWS CloudShell, but the error log message keeps the same.

1

There are 1 best solutions below

0
On

I had the same problem recently and with help of a colleague, the solution was found here: LINK

I added the following to my package.json

   "reactSnap": {
    "puppeteerArgs": [
      "--no-sandbox",
      "--disable-setuid-sandbox"
    ],
       "puppeteerExecutablePath": "/opt/google/chrome/google-chrome"
    }

Then I updated amplify.yml in was amplify build settings like so

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - '# This installs Chrome on any RHEL/CentOS/Amazon Linux variant.'
        - curl https://intoli.com/install-google-chrome.sh | bash
        - npm i
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*