ERROR [gatsby-source-contentful] Please install gatsby-plugin-sharp after updating gatsby v3.2.0 to v3.3.0

[shameer-rahman]

I'm getting the following error message on my console after updating gatsby from 3.2.0 to 3.3.0

ERROR 
[gatsby-source-contentful] Please install gatsby-plugin-sharp

i tried gatsby clean and as well as deleting node_modules and re-installing it, but no luck.

[LekoArts]

Did you run npm install gatsby-plugin-sharp?

The info you provide is a bit sparse sadly.

[shameer-rahman]

Yes i have installed gatsby-plugin-sharp, i'm still getting the error

[leoselig]

Can confirm. Same thing happened to use after that exact update.

[njbmartin]

Turns out this is a confusing error message. gatsby-image-sharp is installed, it's just not behaving as expected...

gatsby/packages/gatsby-source-contentful/src/extend-node-type.js

Lines 697 to 716 in 71ec0cd

	const getDominantColor = async ({ image, options }) => {
	try {
	const absolutePath = await cacheImage(store, image, options)
	const pluginSharp = require(`gatsby-plugin-sharp`)
	if (!(`getDominantColor` in pluginSharp)) {
	console.error(
	`[gatsby-source-contentful] Please upgrade gatsby-plugin-sharp`
	)
	return `rgba(0,0,0,0.5)`
	}
	return pluginSharp.getDominantColor(absolutePath)
	} catch (e) {
	console.error(
	`[gatsby-source-contentful] Please install gatsby-plugin-sharp`
	)
	return `rgba(0,0,0,0.5)`
	}
	}

I did some digging, and cacheImage was the part failing with a Contentful Asset URL returning a 400 error:
https://images.ctfassets.net/t51bs9y4c70l/4gP7PAOsN7Hka0ypaFvtFC/c10443bba1c827068f95fd02d41f7999/IMG_3560.jpg?w=480&h=480&fit=thumb&crop=center

Thankfully, Contentful provides a useful error:

{
  "sys": {
    "type": "Error",
    "id": "ParameterNotAllowed",
    "details": {
      "parameters": [
        "crop"
      ]
    }
  }
}

So, here is the cause of the issue:

gatsbyImageData(
    width: 480
    height: 480
    quality: 100
    cropFocus: CENTER
    resizingBehavior: THUMB
)

If you use cropFocus with gatsbyImageData, it will fail to cache the image.

extend-node-type.js correctly sets the parameter:

gatsby/packages/gatsby-source-contentful/src/extend-node-type.js

Line 176 in 71ec0cd

f: options.cropFocus || undefined,

However, take a look at the url generated for the cache:

gatsby/packages/gatsby-source-contentful/src/cache-image.js

Lines 36 to 38 in 71ec0cd

	if (cropFocus) {
	params.push(`crop=${cropFocus}`)
	}

Nice and simple fix, but yes, the error was misleading...

[shameer-rahman]

i'm not using the "cropFocus" option, but as you mentioned the error message is misleading, when i try to modify the getDominantColor method in extend-node-type.js
console.error([gatsby-source-contentful] Please install gatsby-plugin-sharp); with actual error message with
console.error(e); like below

const getDominantColor = async ({
   ...
  }) => {
    try {
      ...
    } catch (e) {
      console.error(e);
      return `rgba(0,0,0,0.5)`;
    }
  };

i'm getting the lot of error messages on my console like below

[1]  ERROR 
[1] 
[1] [Error: ENOENT: no such file or directory, open
[1] '/Users/shameerabdulrahman/Documents/GitHub/myfc/.cache/contentful/a
[1] ssets/image-w1280-d7808626aed6ba56c44fe0d05363a996.jpg'] {
[1]   errno: -2,
[1]   code: 'ENOENT',
[1]   syscall: 'open',
[1]   path: '/Users/shameerabdulrahman/Documents/GitHub/myfc/.cache/cont
[1] entful/assets/image-w1280-d7808626aed6ba56c44fe0d05363a996.jpg'
[1] }
[1] 

[ShahAnuj2610]

put a debugger in on this line

console.error(`[gatsby-source-contentful] Please install gatsby-plugin-sharp`);

in node_modules/gatsby-source-contentful/extend-node-type.js and you'll get to know the error details.

In my case the error was this