GatsbyImage with gatsby-source-sanity: Cannot read property 'split' error
https://github.com/sanity-io/gatsby-source-sanity#using-images ) exactly as shown in the example, but cannot get it to work as shown.I have formatted my query exactly as shown (notice just the “asset”, without the “fluid, src, or gatsbyImage:
query vehicleQuery($slug: String) {
sanityVehicle(id: {eq: $slug}) {
id
_id
modellbetegnelse
manufacturer {
label
logoimage {
asset
}
}GraphQLError: Field "asset" of type "SanityImageAsset" must have a selection of subfields. Did you mean "asset { ... }"?If I add fluid, src, and even gatsbyImageData to the query:
query vehicleQuery($slug: String) {
sanityVehicle(id: {eq: $slug}) {
id
_id
modellbetegnelse
manufacturer {
label
logoimage {
asset {
fluid {
src
}
gatsbyImageData
}
}
}WebpackError: TypeError: Cannot read property 'split' of undefinedfailed Building static HTML for pages - 0.243s
ERROR #95313
Building static HTML failed for path "/vehicles/-d9d34e74-0ffb-5ae8-b103-7895bfbd02c7"
See our docs page for more info on this error: <https://gatsby.dev/debug-html>
161 | var hasOriginalRatio = desiredAspectRatio === dimensions.aspectRatio;
162 | var outputHeight = Math.round(height ? height : width / desiredAspectRatio);
> 163 | var imgUrl = isOriginalSize(width, outputHeight) ||
| ^
164 | (hasOriginalRatio && width > dimensions.width && outputHeight > dimensions.height)
165 | ? url
166 | : url + "?w=" + width + "&h=" + outputHeight + "&fit=crop";
WebpackError: TypeError: Cannot read property 'split' of undefined
- getGatsbyImageProps.ts:163
gatsby-starter-hello-world/src/images/getGatsbyImageProps.ts:163:49
- getGatsbyImageProps.ts:393
gatsby-starter-hello-world/src/images/getGatsbyImageProps.ts:393:21
- vehicledetail.js:14
gatsby-starter-hello-world/src/templates/vehicledetail.js:14:36
- extends.js:8
[gatsby-starter-hello-world]/[@babel]/runtime/helpers/extends.js:8:1
- extends.js:14
[gatsby-starter-hello-world]/[@babel]/runtime/helpers/extends.js:14:1
- extends.js:13
[gatsby-starter-hello-world]/[@babel]/runtime/helpers/extends.js:13:1
- static-entry.js:263
gatsby-starter-hello-world/.cache/static-entry.js:263:20
- history.js:26
[gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/es/lib/history.js:26:1System:
OS: macOS 11.2.3
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 15.12.0 - /usr/local/bin/node
npm: 7.6.3 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 89.0.4389.90
Firefox: 86.0
Safari: 14.0.3
npmPackages:
gatsby: ^3.0.1 => 3.1.2
gatsby-plugin-image: ^1.1.1 => 1.1.2
gatsby-plugin-postcss: ^4.1.0 => 4.1.0
gatsby-plugin-sharp: ^3.1.1 => 3.1.2
gatsby-source-filesystem: ^3.1.0 => 3.1.0
gatsby-source-sanity: ^7.0.0 => 7.0.0
gatsby-transformer-sharp: ^3.1.0 => 3.1.0
npmGlobalPackages:
gatsby-cli: 3.1.0I can see you're experiencing issues with gatsby-plugin-image and gatsby-source-sanity integration in Gatsby v3. The error you're getting is related to how you need to query images with the new plugin. Let me explain what's happening and how to fix it.
The problem is that Gatsby v3 introduced gatsby-plugin-image which replaced the old gatsby-image plugin, and the way you query images has changed significantly. You should not be querying fluid or src anymore - those were part of the old API.
The Solution
1. Update your GraphQL query to use gatsbyImageData:
query vehicleQuery($slug: String) {
sanityVehicle(id: {eq: $slug}) {
id
_id
modellbetegnelse
manufacturer {
label
logoimage {
asset {
gatsbyImageData(
width: 400
placeholder: BLURRED
formats: [AUTO, WEBP]
)
}
}
}
}
}2. Use the GatsbyImage component correctly in your template:
import { GatsbyImage, getImage } from "gatsby-plugin-image"
// In your component:
const VehicleDetail = ({ data }) => {
const image = getImage(data.sanityVehicle.manufacturer.logoimage.asset)
return (
<div>
{image && (
<GatsbyImage
image={image}
alt={data.sanityVehicle.manufacturer.label || "Logo"}
/>
)}
</div>
)
}
export default VehicleDetailWhy You're Getting the Errors
"Field 'asset' must have a selection of subfields" - This happens because GraphQL requires you to specify what data you want from the
assetobject. You can't just queryassetby itself."Cannot read property 'split' of undefined" - This error occurs because when you tried to query
fluidandsrc, those fields don't exist in the newgatsby-plugin-imageAPI, so the data structure being passed togetGatsbyImagePropsis malformed.
Important Notes
- The
getImage()helper function fromgatsby-plugin-imagesafely extracts the image data - Always add a null check (
{image && ...}) before renderingGatsbyImageto prevent errors if the image is missing - Make sure both
gatsby-plugin-imageANDgatsby-plugin-sharpare installed and configured in yourgatsby-config.js
Verify Your Setup
Make sure your gatsby-config.js includes both plugins:
module.exports = {
plugins: [
{
resolve: 'gatsby-source-sanity',
options: {
projectId: 'your-project-id',
dataset: 'your-dataset',
// ... other options
},
},
'gatsby-plugin-image',
'gatsby-plugin-sharp',
],
}The fact that using fluid.src with a regular <img> tag works confirms your Sanity images are properly configured - you just need to use the correct modern API for gatsby-plugin-image. These changes should resolve both errors you're experiencing!
Show original thread12 replies
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
