Getting a error while building In netlify (web app using gatsby and strapi)

user_10387394 0
Viewed 404

To recreate it you can clone my branch github link :- https://github.com/WOLFIEEEE/Gatsby-portfolio/tree/trying-heroku-1

and too see the error you can go to link:- https://app.netlify.com/sites/wolfie-portfolio/deploys/5feabd7bb15555000765b2f5

I am deploying My strapi to heroku. When i run my project locally I dont get any error it runs smooth and when I push same thing to github and strapi try to build it is fails .

I am new to this if someone can help me out it would be great help

error Failed to retrieve metadata from image /opt/build/repo/src/assets/hero-img.png
10:55:49 AM: 
10:55:49 AM: 
10:55:49 AM:   Error: Input file contains unsupported image format
10:55:49 AM: 
10:55:49 AM: not finished run static queries - 0.053s
10:55:49 AM: npm ERR! code ELIFECYCLE
10:55:49 AM: npm ERR! errno 1
10:55:49 AM: npm ERR! gatsby-starter-hello-world@0.1.0 build: `gatsby build`
10:55:49 AM: npm ERR! Exit status 1
10:55:49 AM: npm ERR!
10:55:49 AM: npm ERR! Failed at the gatsby-starter-hello-world@0.1.0 build script.
10:55:49 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
10:55:49 AM: npm ERR! A complete log of this run can be found in:
10:55:49 AM: npm ERR!     /opt/buildhome/.npm/_logs/2020-12-29T05_25_49_093Z-debug.log
10:55:49 AM: ​
10:55:49 AM: ────────────────────────────────────────────────────────────────
10:55:49 AM:   "build.command" failed                                        
10:55:49 AM: ────────────────────────────────────────────────────────────────
10:55:49 AM: ​
10:55:49 AM:   Error message
10:55:49 AM:   Command failed with exit code 1: npm run build
10:55:49 AM: ​
10:55:49 AM:   Error location
10:55:49 AM:   In Build command from Netlify app:
10:55:49 AM:   npm run build ```

this is the error I got you can check above netlify link for more info
npm netlify gatsby strapi
2 Answers

Look at:

6:25:49 AM: Error: Input file contains unsupported image format

In your gatsby-config.js(line 7) you are using an image:

image: "/rrrrrr.png",

The image that you are pointing to in the static folder is named rrrrrrr.PNG (notice the format, .PNG instead of .png).

In addition, that image is outside the ecosystem of Gatsby since it won't be parsed and transformed by Gatsby's transformers and sharps and therefore, it won't be available to use as gatsby-image, but since the path will exist, you will be able to use it as a normal image using img tag.

Look carefully at your logs. Your issue has gone but now, the issue is:

8:45:44 AM: error There was an error in your GraphQL query:

8:45:44 AM: Cannot query field "childImageSharp" on type "StrapiAboutImage".

I don't know what image it is this but it seems to be unparsed by Gatsby. To allow Gatsby to use childImageSharp, the image must be in the ecosystem of Gatsby to be parseable by transformers and sharps dependencies.

In your /pages/about.js (line 59):

Image {
  childImageSharp {
    fluid {
      src
    }
  }

This is causing your issue. Without knowing your data structure it's impossible to guess what's causing the error but apparently, Gatsby is not able to parse that image using childImageSharp.

user_55853710

I think the problem was in the uploading service as Heroku refresh every 2-3 hours or a day the data we provided to it get lost.

Check if the Upload server is working fine or not.

user_103873940
Related