My GatsbyJS website fails to build

[pedrolamas]

My GatsbyJS website builds perfectly on Azure Pipelines, GitHub Actions, Netlify, and yet it fails to build as an Azure Static Web App.

After creating the website, I can see that the first run failed as I had a requirement for yarn ">=1.22" in the engines node inside the package.json file: https://github.com/PedroLamas/pedrolamas.com/actions/runs/111930224

I've now lowered that to 1.17, yet it still fails to build, this time due to some error while processing the images: https://github.com/PedroLamas/pedrolamas.com/actions/runs/111933866

The branch in use is here: https://github.com/PedroLamas/pedrolamas.com/tree/azure-test

[johnpapa]

Thanks.

adding @miwebst

[annaji-msft]

This morning someone also ran into this exact issue and the fix was to update the gatsby config

micahgodbolt/micahgodbolt.com@f516323

Error https://github.com/micahgodbolt/micahgodbolt.com/runs/696944712?check_suite_focus=true

[miwebst]

Yes this is because our version of Oryx is missing this package: libGL.so.1

@johnpapa , @craigshoemaker we should update our Gatsby doc to do the build before our Github Action. Otherwise we will keep seeing people hit this.

[pedrolamas]

Hi @anganti, thank you for your suggestion but I wouldn't call disabling the automatic conversion of images files to webp format a "fix", as that is basically cutting down the functionality provided by GatsbyJS!

[pedrolamas]

@miwebst thank you for your comments, but wouldn't it be easier to just add the missing package to "permanently" fix the problem?

Also, my first failure was due to my own specification that this site required yarn 1.22 or above, I know I can bundle yarn in the repo, but is there a way I can force the build process to download and use the correct version of yarn?

[annaji-msft]

@pedrolamas agree, a more better word would have been mitigate. And the other option would be as @miwebst suggested to skip the build all together via StaticWebApps GitHub action and purely use it for deployment.

The way to do that is update your main.ym l file and add the staticwebapp action step after build step. Replace the app_location with the location of build output(static content)

[miwebst]

Yes Pedro you have a good point, we could add the missing package. The challenge here is that the more packages that we add to our base image, the larger it becomes, and the longer it takes for your action to start.

We are still investigating options for making this faster and have the libraries that apps need. If you have feedback on that, please let us know!

[pedrolamas]

@anganti thanks for your help, seems that adding the build steps to the azure-static-web-apps-jolly-ground-016a8c003.yml file did the trick! pedrolamas/pedrolamas.com@b82fcbc

I still need to properly test this, but I can already see the site live at https://jolly-ground-016a8c003.azurestaticapps.net/

Images seem to be all missing but that might be a configuration issue of mine... I'll check that tomorrow (it's 01:24 in the UK right now...)

[pedrolamas]

Ok, got it all working in the end, with images and custom domain!

https://azure-test.pedrolamas.com

I've ran some quick benchmarks on it:

• https://www.pedrolamas.com - perf 96/100 (built and hosted on Netlify, served by Cloudflare CDN) https://www.fastorslow.com/app/profile/f2f146f8-11f5-5526-b14b-eca2d8e9b4ec
• https://azure-test.pedrolamas.com - perf 98/100 (built by GitHub Actions, hosted and served by Azure Static Web Apps) https://www.fastorslow.com/app/profile/ca6be8e7-1db8-5e42-b92c-cdb5eff79857

Some initials quirks to deploy, but very impressive results in the end!! 😊

I'm closing this ticket as this is a fully valid workaround for the problem, but I would recommend either changing the instructions or making some changes on the way Gatsby websites (and possibly others) are built!

[craigshoemaker]

@anganti, @pedrolamas - so does the doc need to have both the changes for disabling webp and updating the uses section?

[pedrolamas]

My take is not to disable webp or anything else (it should just work as it is and not require specific changes for Azure Static Web Apps to be happy with)

Instead, just do a normal build before invoking the Azure/static-web-apps-deploy action so that all it needs to do is copy and publish the static files (this way, it will skip the need to run a build on this step, as it did on the previous one)

[johnpapa]

@softchris - do you have this in your learn module?

[miwebst]

Before we update the docs, lets finish our exploration into the larger image that should solve this problem. @pedrolamas do you mind if I fork your repo for testing?

[pedrolamas]

@miwebst please go ahead! 😁

[softchris]

@softchris - do you have this in your learn module?

I don't have an instruction where I tell them to build the Gatsby project prior no. I'll wait for @miwebst before doing any update as he wanted to explore a solution involving the image

[miwebst]

Hey @pedrolamas, I've updated our image to use the larger version of Oryx that contains the necessary dependencies for webp.

You will still need to downgrade your version of yarn. (@kichalla as a side ask, is there anything we can do to avoid this issue in the future- maybe download latest yarn on the fly?)

Aside from that everything should just work! Do you mind giving it a try?

[pedrolamas]

@miwebst it works!!

I've just done my changes to use the default building mechanism and now it is working fine!

On the plus side, I was surprised to see that the environment variables my build needs are being correctly passed so everything works fine!