Home
Support Forums

Error: Input file contains unsupported image format, gatsby

Hello @MikeMc, welcome!

The error log says enough, it seems like it doesn’t support the format? They should be square…

It supported it yesterday and the 40 days prior. Why would it stop supporting png images? Also it builds local. I’m thinking that it has something to do with creating the thumbnails, but I’m not sure what library does that. Seems like its blowing up on that step all of sudden, so maybe it’s a version problem with something in node_modules.

The issue is solved here:

Essentially I had to add

"resolutions": {
    "sharp": "0.24.0"
  },

to the package.json

Noob here on the community. How should I tag this and/or rewrite the question / subject so people with this error can find this better?

1 Like

that’s a great question, and thank you for answering it! The value of this forum rests on people being able to find information they need to solve problems they encounter as quickly as possible, after all!

first, if you have an error message, here, it is Error: Input file contains unsupported image format i would put that in the title of the post. That way, people who google error messages can find it right away.

I think a really good title for this thread would be something like:

"Error: Input file contains unsupported image format, gatsby" so that people can find things easier.

Secondly, I would indent your code, by placing three backticks: ` around it. (if you are needing to highlight a code snippet, one single backtick around a code chunk will do, but if its multiline, then 3.

Third, you already did the fantastic work of finding a solution, coming back, posting it, and marking your question as solved - this is great because it lets others know how to fix the problem.

thanks again for asking & being invested in having other people find solutions more easily :muscle:

1 Like

Thanks @perry Done and Done

1 Like

no, thank you! :tada:

Hi @MikeMc - thanks for renaming the thread, I just found it by googling “Input file contains unsupported image format gatsby” and it fixed my problem too!

2 Likes

I tried to the suggetion but it doesn`t work.
I think I mistook maybe.
But I fixed it this followings:

  1. Find old version for sharp: npm list sharp
  2. Upgrade version dependencies that uses old sharp version.

Example)

  1. List up
  2. Upgrade version
1 Like

Hello, I am also encountering the same problem and the previous solutions proposed unfortunately didn’t work for me.

My website is 7form.pl. Using Next, I am running a post-build script that with sharp creates webp versions of the images uploaded via Netlify CMS. Locally it works fine but on Netlify the script always fails with the error Error: Input file contains unsupported image format.

This is my package.json:

{
  "name": "7form",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "build:webp": "node buildSourceSetsImages.js",
    "start": "next start",
    "export": "npm run build && next export && NODE_ENV=production npm run build:webp",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "npm run lint -- --fix",
    "type-check": "tsc --noEmit"
  },
  "keywords": [],
  "author": "Alberto Giachino",
  "license": "ISC",
  "dependencies": {
    "framer-motion": "^2.1.4",
    "front-matter": "^4.0.2",
    "markdown-to-jsx": "^6.11.4",
    "next": "^9.4.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sharp": "^0.27.1",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@types/markdown-to-jsx": "^6.11.0",
    "@types/node": "^14.0.14",
    "@types/react": "^16.9.41",
    "@types/styled-components": "^5.1.1",
    "@typescript-eslint/eslint-plugin": "^3.5.0",
    "@typescript-eslint/parser": "^3.5.0",
    "babel-plugin-styled-components": "^1.10.7",
    "eslint": "^7.4.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.0.5",
    "frontmatter-markdown-loader": "^3.6.0",
    "prettier": "^2.0.5",
    "typescript": "^3.9.6"
  }
}

This is my script:

const fs = require('fs');
const path = require('path');

const sharp = require('sharp');

const SOURCE_SETS_BREAKPOINTS = Object.freeze([425, 768, 1024, 2560]);

const resizeTo = (width, outputDirectory) => ({ imagePath, imageName }) => {
  return new Promise((resolve, reject) => {
    sharp(imagePath)
      .resize(width)
      .webp()
      .toFile(`${outputDirectory}/${imageName}.BUILD.${width}.webp`)
      .then(resolve)
      .catch((error) => {
        reject(`
      ${imagePath}
      ${error}`);
      });
  });
};

const isProduction = process.env.NODE_ENV === 'production';

console.log(
  `---\n\nBuilding responsive images source sets${
    isProduction ? ' for production' : ''
  }...\n`
);

console.time('Done');

const uploadsPath = path.resolve(
  process.cwd(),
  isProduction ? 'out' : 'public',
  'static',
  'images',
  'uploads'
);

const webpPath = path.resolve(
  process.cwd(),
  isProduction ? 'out' : 'public',
  'static',
  'images',
  'webp'
);

// Make sure the uploadsPath path exists
if (!fs.existsSync(uploadsPath)) {
  throw new Error('Uploads folder does not exist');
}

// Always create a new webp directory
if (fs.existsSync(webpPath)) {
  fs.rmdirSync(webpPath, { recursive: true });
}

fs.mkdirSync(webpPath);

// Build the source sets images creators
const srcSetsCreators = SOURCE_SETS_BREAKPOINTS.map((breakpoint) =>
  resizeTo(breakpoint, webpPath)
);

// Retrieve all the source images
const srcImagesData = fs
  .readdirSync(uploadsPath)
  .filter((filename) => !/.+\.BUILD\.\d+\.webp/.test(filename))
  .map((fileName) => ({
    imagePath: path.resolve(uploadsPath, fileName),
    imageName: fileName,
  }));

// Create and save the source sets images
const sourceSetsPromises = srcImagesData.flatMap((imageData) =>
  srcSetsCreators.map((srcSetsCreator) => srcSetsCreator(imageData))
);

Promise.all(sourceSetsPromises).catch(err => {
  console.error(err)
  process.exit(1)
}).finally(() => {
  console.timeEnd('Done');
  console.log('\n---\n');
});

And finally this is the log of the last failed deploy on the develop branch:

10:06:25 AM: Build ready to start
10:06:27 AM: build-image version: d84c79427e8f83c1ba17bcdd7b3fe38059376b68
10:06:27 AM: build-image tag: v3.6.1
10:06:27 AM: buildbot version: df42d44cc6a0381cf657a671baf049c03981bafe
10:06:27 AM: Fetching cached dependencies
10:06:27 AM: Starting to download cache of 202.3MB
10:06:28 AM: Finished downloading cache in 1.11711502s
10:06:28 AM: Starting to extract cache
10:06:35 AM: Finished extracting cache in 7.017333617s
10:06:35 AM: Finished fetching cache in 8.380676275s
10:06:35 AM: Starting to prepare the repo for build
10:06:35 AM: Netlify Large Media is enabled, running git commands with GIT_LFS_SKIP_SMUDGE=1
10:06:36 AM: Preparing Git Reference refs/heads/develop
10:06:42 AM: Starting build script
10:06:42 AM: Installing dependencies
10:06:42 AM: Python version set to 2.7
10:06:43 AM: Started restoring cached node version
10:06:46 AM: Finished restoring cached node version
10:06:47 AM: v12.18.0 is already installed.
10:06:48 AM: Now using node v12.18.0 (npm v6.14.4)
10:06:48 AM: Started restoring cached build plugins
10:06:48 AM: Finished restoring cached build plugins
10:06:49 AM: Attempting ruby version 2.7.1, read from environment
10:06:50 AM: Using ruby version 2.7.1
10:06:51 AM: Using PHP version 5.6
10:06:51 AM: Started restoring cached node modules
10:06:51 AM: Finished restoring cached node modules
10:06:51 AM: Started restoring cached go cache
10:06:51 AM: Finished restoring cached go cache
10:06:51 AM: go version go1.14.4 linux/amd64
10:06:51 AM: go version go1.14.4 linux/amd64
10:06:51 AM: Installing missing commands
10:06:51 AM: Verify run directory
10:06:53 AM: ​
10:06:53 AM: ────────────────────────────────────────────────────────────────
10:06:53 AM:   Netlify Build                                                 
10:06:53 AM: ────────────────────────────────────────────────────────────────
10:06:53 AM: ​
10:06:53 AM: ❯ Version
10:06:53 AM:   @netlify/build 9.1.3
10:06:53 AM: ​
10:06:53 AM: ❯ Flags
10:06:53 AM:   deployId: 602f7f90915fbd000729fb28
10:06:53 AM:   mode: buildbot
10:06:53 AM: ​
10:06:53 AM: ❯ Current directory
10:06:53 AM:   /opt/build/repo
10:06:53 AM: ​
10:06:53 AM: ❯ Config file
10:06:53 AM:   No config file was defined: using default values.
10:06:53 AM: ​
10:06:53 AM: ❯ Context
10:06:53 AM:   branch-deploy
10:06:53 AM: ​
10:06:53 AM: ❯ Installing plugins
10:06:53 AM:    - netlify-plugin-cache-nextjs@1.4.0
10:07:03 AM: ​
10:07:03 AM: ❯ Loading plugins
10:07:03 AM:    - netlify-plugin-cache-nextjs@1.4.0 from Netlify app
10:07:03 AM: ​
10:07:03 AM: ────────────────────────────────────────────────────────────────
10:07:03 AM:   1. onPreBuild command from netlify-plugin-cache-nextjs        
10:07:03 AM: ────────────────────────────────────────────────────────────────
10:07:03 AM: ​
10:07:03 AM: No cache found for the .next folder at the location `.next/cache`
10:07:03 AM: ​
10:07:03 AM: (netlify-plugin-cache-nextjs onPreBuild completed in 239ms)
10:07:03 AM: ​
10:07:03 AM: ────────────────────────────────────────────────────────────────
10:07:03 AM:   2. Build command from Netlify app                             
10:07:03 AM: ────────────────────────────────────────────────────────────────
10:07:03 AM: ​
10:07:03 AM: $ npm run export
10:07:04 AM: > 7form@1.0.0 export /opt/build/repo
10:07:04 AM: > npm run build && next export && NODE_ENV=production npm run build:webp
10:07:04 AM: > 7form@1.0.0 build /opt/build/repo
10:07:04 AM: > next build
10:07:05 AM: Browserslist: caniuse-lite is outdated. Please run:
10:07:05 AM: npx browserslist@latest --update-db
10:07:05 AM: Warning: No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
10:07:05 AM: Creating an optimized production build...
10:07:10 AM: > Using external babel configuration
10:07:10 AM: > Location: "/opt/build/repo/.babelrc"
10:07:35 AM: Compiled successfully.
10:07:35 AM: 
10:07:35 AM: Automatically optimizing pages...
10:07:38 AM: Page                                                           Size     First Load JS
10:07:38 AM: ┌ ○ /                                                          3.15 kB         108 kB
10:07:38 AM: ├   /_app                                                      3.04 kB         105 kB
10:07:38 AM: ├ ○ /404                                                       3.25 kB         108 kB
10:07:38 AM: ├ ● /architektura                                              2.98 kB         108 kB
10:07:38 AM: ├ ○ /kontakt                                                   3.53 kB         108 kB
10:07:38 AM: ├ ○ /o-nas                                                     2.37 kB         114 kB
10:07:38 AM: ├ ● /projekty                                                  2.97 kB         108 kB
10:07:38 AM: ├ ● /projekty/[project]                                        1.5 kB          113 kB
10:07:38 AM: ├   ├ /projekty/%20naturalnie-w-czarnymlesie
10:07:38 AM: ├   ├ /projekty/biuro-dozamech
10:07:38 AM: ├   ├ /projekty/ceg%C5%82a-i-beton
10:07:38 AM: ├   └ [+13 more paths]
10:07:38 AM: └ ● /wnetrza                                                   2.99 kB         108 kB
10:07:38 AM: + First Load JS shared by all                                  105 kB
10:07:38 AM:   ├ static/pages/_app.js                                       3.04 kB
10:07:38 AM:   ├ chunks/05d954cf.685b71.js                                  20.8 kB
10:07:38 AM:   ├ chunks/77d77774cb3c9624e7505eba539675d0be9def92.3e4f00.js  9.18 kB
10:07:38 AM:   ├ chunks/bb2c3f56770e872b409ab48a4cdf9739f577b92c.003804.js  13.8 kB
10:07:38 AM:   ├ chunks/effe5231f24ca20b29e38e9f95b0d593f5bc120b.e8390e.js  10.2 kB
10:07:38 AM:   ├ chunks/framework.c6faae.js                                 40 kB
10:07:38 AM:   ├ runtime/main.e9656a.js                                     6.98 kB
10:07:38 AM:   ├ runtime/webpack.c21266.js                                  746 B
10:07:38 AM:   └ css/b6b00fcfab68dee18065.css                               157 B
10:07:38 AM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
10:07:38 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
10:07:38 AM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
10:07:38 AM: > using build directory: /opt/build/repo/.next
10:07:38 AM:   copying "static build" directory
10:07:38 AM: > No "exportPathMap" found in "next.config.js". Generating map from "./pages"
10:07:38 AM:   launching 7 workers
10:07:38 AM: Exporting (0/7)
10:07:38 AM:   copying "public" directory
10:07:39 AM: Exporting (1/7)
10:07:39 AM: Exporting (2/7)
10:07:39 AM: Exporting (3/7)
10:07:39 AM: Exporting (4/7)
10:07:39 AM: Exporting (5/7)
10:07:39 AM: Exporting (6/7)
10:07:39 AM: Exporting (7/7)
10:07:39 AM: Export successful
10:07:40 AM: > 7form@1.0.0 build:webp /opt/build/repo
10:07:40 AM: > node buildSourceSetsImages.js
10:07:40 AM: ---
10:07:40 AM: Building responsive images source sets for production...
10:07:40 AM:       /opt/build/repo/out/static/images/uploads/109792821_3655427744486807_5377481951943737859_o.png
10:07:40 AM:       Error: Input file contains unsupported image format
10:07:40 AM: (sharp:1670): GLib-CRITICAL **: 09:07:40.784: g_hash_table_lookup: assertion 'hash_table != NULL' failed
10:07:40 AM: (sharp:1670): GLib-CRITICAL **: 09:07:40.784: g_hash_table_lookup: assertion 'hash_table != NULL' failed
10:07:40 AM: (sharp:1670): GLib-CRITICAL **: 09:07:40.785: g_hash_table_lookup: assertion 'hash_table != NULL' failed
10:07:40 AM: (sharp:1670): GLib-CRITICAL **: 09:07:40.785: g_hash_table_insert_internal: assertion 'hash_table != NULL' failed
10:07:40 AM: (sharp:1670): GLib-CRITICAL **: 09:07:40.785: g_hash_table_lookup: assertion 'hash_table != NULL' failed
10:07:41 AM: Segmentation fault (core dumped)
10:07:41 AM: npm ERR! code ELIFECYCLE
10:07:41 AM: npm ERR! errno 139
10:07:41 AM: npm ERR! 7form@1.0.0 build:webp: `node buildSourceSetsImages.js`
10:07:41 AM: npm ERR! Exit status 139
10:07:41 AM: npm ERR!
10:07:41 AM: npm ERR! Failed at the 7form@1.0.0 build:webp script.
10:07:41 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
10:07:41 AM: npm ERR! A complete log of this run can be found in:
10:07:41 AM: npm ERR!     /opt/buildhome/.npm/_logs/2021-02-19T09_07_41_101Z-debug.log
10:07:41 AM: npm ERR! code ELIFECYCLE
10:07:41 AM: npm ERR! errno 139
10:07:41 AM: npm ERR! 7form@1.0.0 export: `npm run build && next export && NODE_ENV=production npm run build:webp`
10:07:41 AM: npm ERR! Exit status 139
10:07:41 AM: npm ERR!
10:07:41 AM: npm ERR! Failed at the 7form@1.0.0 export script.
10:07:41 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
10:07:41 AM: npm ERR! A complete log of this run can be found in:
10:07:41 AM: npm ERR!     /opt/buildhome/.npm/_logs/2021-02-19T09_07_41_146Z-debug.log
10:07:41 AM: ​
10:07:41 AM: ────────────────────────────────────────────────────────────────
10:07:41 AM:   "build.command" failed                                        
10:07:41 AM: ────────────────────────────────────────────────────────────────
10:07:41 AM: ​
10:07:41 AM:   Error message
10:07:41 AM:   Command failed with exit code 139: npm run export
10:07:41 AM: ​
10:07:41 AM:   Error location
10:07:41 AM:   In Build command from Netlify app:
10:07:41 AM:   npm run export
10:07:41 AM: ​
10:07:41 AM:   Resolved config
10:07:41 AM:   build:
10:07:41 AM:     command: npm run export
10:07:41 AM:     commandOrigin: ui
10:07:41 AM:     environment:
10:07:41 AM:       - NETLIFY_LFS_ORIGIN_URL
10:07:41 AM:     publish: /opt/build/repo/out
10:07:41 AM:   plugins:
10:07:41 AM:     - inputs: {}
10:07:41 AM:       origin: ui
10:07:41 AM:       package: netlify-plugin-cache-nextjs
10:07:41 AM: Caching artifacts
10:07:41 AM: Started saving node modules
10:07:41 AM: Finished saving node modules
10:07:41 AM: Started saving build plugins
10:07:41 AM: Finished saving build plugins
10:07:41 AM: Started saving pip cache
10:07:41 AM: Finished saving pip cache
10:07:41 AM: Started saving emacs cask dependencies
10:07:41 AM: Finished saving emacs cask dependencies
10:07:41 AM: Started saving maven dependencies
10:07:41 AM: Finished saving maven dependencies
10:07:41 AM: Started saving boot dependencies
10:07:41 AM: Finished saving boot dependencies
10:07:41 AM: Started saving rust rustup cache
10:07:41 AM: Finished saving rust rustup cache
10:07:41 AM: Started saving go dependencies
10:07:41 AM: Finished saving go dependencies
10:07:41 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
10:07:41 AM: Failing build: Failed to build site
10:07:41 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
10:07:41 AM: Finished processing build request in 1m14.578660344s

Any help with this would be highly appreciated :confused:

@perry

Hiya and sorry to be slow to get back to you!

Can you build locally? This is always the first question we ask folks when they are debugging builds - Netlify’s CI isn’t magic and does require working source code to work, and if it doesn’t work locally, it is definitely a problem you’ll have to fix without our staff’s advice (we can’t help with problems in your source code, only our service).

If it does work locally, have you verified that we are using the same version of node and other dependencies that your local build does? Docs on that here: Manage build dependencies | Netlify Docs

Another common reason for gatsby build failures especially involving images, is memory use - it is possible that it’s simply “too heavy” for us to process within our build environment. More details on those situations in these two articles:

and

Finally, if those don’t help, when I run into this problem, I might try examining the image during build to make sure it IS valid. What’s its file size? what are its contents and permissions? You can do things like this to your build command to try to tell:

npm run export ; identify /opt/build/repo/out/static/images/uploads/109792821_3655427744486807_5377481951943737859_o.png ; false

This will run the identify command (ImageMagick - Command-line Tools: Identify) on the “image” and tell you what it knows about it - including if it is indeed not valid. Then it will force your deploy to fail so we don’t publish a broken one :slight_smile:

Hello @fool , thank you for your reply. Yes locally it works fine. It even works on the local Netlify Docker build image! When I run identify I indeed get: identify: improper image header . If I do it locally I get PNG 930x1125 930x1125+0+0 8-bit sRGB 976373B 0.000u 0:00.000. It seems like the image gets corrupted during the build process or something similar… could it be related to Large Media? After a lot of attempts, I really have no clue how to solve this problem anymore…

Yes, it’s due to Netlify Large Media. If I cat that file I get the git lfs reference and not the image content. Also, reading more in details the Large Media docs I see that:

Files tracked with Large Media are uploaded directly to the Netlify Large Media storage service on push, completely bypassing the site build. This saves build time, but also means that the files are not available to tools that process asset files during the build, such as Hugo’s image processing or the gatsby-image plugin.

Having discovered this, I would like to require assistance to disable Netlify Large Media on my website.

This my website API ID: 203c2c52-bf51-4daf-b6ce-329f88158144

Thanks for letting us know you want to uninstall the Large Media add-on for your site. Would you please confirm you have read the following Support Guide?

If you have read that, please confirm you have backups of all files.

​Please let us know if there are any questions!

Hello @perry , thank you for your reply. Yes I have read the guide and I have backups of my files. Please proceed to remove Large Media from my website.

Hi, @AG89z. We have removed the Large Media add-on from the site now.

Would you please push the commit removing .lfsconfig to the upstream repository? This will trigger a new build.

Please keep in mind that you might want to run the command below after deleting the .lfsconfig file:

git lfs push --all origin

This will sync the local repo’s LFS objects with the Git LFS service at the original Git host. It pushes any new binary blobs to their LFS service which may have been added after you moved the LFS service to Large Media.

Please let us know if there are any issues with the new build or deployed site.

Hi @luke , thank you, now the build is working :+1:

TL;DR: The key is to downgrade to node version 10.18.1. I know it’s not always available because some dependecies depend on a higher node version, but at least I could use core-js@2.6.12 or some other polyfills to make up for it.

Here’s a partial failed log:

9:51:36 AM: success onPreBootstrap - 0.018s
9:51:36 AM: success createSchemaCustomization - 0.151s
9:51:36 AM: success Checking for changed pages - 0.000s
9:51:36 AM: success source and transform nodes - 0.260s
9:51:36 AM: warning Plugin `gatsby-source-filesystem` has customized the built-in Gatsby GraphQL type `File`. This is allowed, but could potentially cause conflicts.
9:51:37 AM: success building schema - 0.612s
9:51:37 AM: Using environment config: 'production'
9:51:37 AM: error [object Object] Input file contains unsupported image format
9:51:37 AM: 
9:51:37 AM: 
9:51:37 AM:   Error: Input file contains unsupported image format
9:51:37 AM: 
9:51:37 AM: not finished createPages - 0.411s
9:51:37 AM: not finished Generating image thumbnails - 0.312s

On Netlify, my node version had always been 12.16.3. Once I changed it to 10.18.1, I could deploy it.

Here’s my local dev:

Gatsby CLI version: 2.7.47
Gatsby version: 2.32.13

gatsby info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.1 - /c/Users/user/AppData/Local/Programs/Python/Python38/python
  Browsers:
    Edge: 44.19041.1023.0
  npmPackages:
    gatsby: ^2.25.0 => 2.32.13
    gatsby-cli: ^2.7.47 => 2.7.47
    gatsby-image: ^2.2.18 => 2.11.0
    gatsby-plugin-feed: ^2.3.12 => 2.13.1
    gatsby-plugin-layout: ^1.1.7 => 1.10.0
    gatsby-plugin-manifest: ^2.12.1 => 2.12.1
    gatsby-plugin-netlify: ^2.1.12 => 2.11.1
    gatsby-plugin-offline: ^2.2.10 => 2.2.10
    gatsby-plugin-react-helmet: ^3.1.7 => 3.10.0
    gatsby-plugin-react-svg: ^2.1.2 => 2.1.2
    gatsby-plugin-sharp: ^2.14.4 => 2.14.4
    gatsby-plugin-sitemap: ^2.2.12 => 2.12.0
    gatsby-plugin-styled-components: ^4.13.0 => 4.13.0
    gatsby-plugin-styled-jsx: ^3.1.6 => 3.10.0
    gatsby-plugin-styled-jsx-postcss: ^2.0.2 => 2.0.2
    gatsby-plugin-typescript: ^2.1.7 => 2.12.1
    gatsby-remark-component-parent2div: ^1.2.3 => 1.2.3
    gatsby-remark-copy-linked-files: ^2.1.19 => 2.10.0
    gatsby-remark-emojis: ^0.3.2 => 0.3.3
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^3.1.21 => 3.11.1
    gatsby-remark-prismjs: ^3.3.13 => 3.13.0
    gatsby-remark-rehype-images: ^0.1.2 => 0.1.2
    gatsby-remark-responsive-iframe: ^2.2.16 => 2.11.0
    gatsby-remark-smartypants: ^2.1.8 => 2.10.0
    gatsby-source-filesystem: ^2.1.22 => 2.11.1
    gatsby-transformer-remark: ^2.6.22 => 2.16.1
    gatsby-transformer-sharp: ^2.12.1 => 2.12.1

The following is the instruction from Build gets stuck at Generating image thumbnails on how to downgrade node version:

What has worked for me:

Downgrade node.js

Delete node_modules & package-lock.json & yarn.lock

Use nvm (node version manager) and switch to node version 10.18.1:
nvm install 10.18.1
nvm use 10.18.1

yarn install

gatsby clean

gatsby develop / gatsby build

If you’re still stuck, try upgrading your sharp dependecy:

For "dependencies", "sharp": "^0.25.4"; for "devDependencies", "sharp-cli": "^1.15.0"

Cheers!