[gatsby-transformer-javascript-static-exports] Usage with `gatsby-image`
See original GitHub issueHi! I’m using gatsby-transformer-javascript-static-exports
to pull in data from pages into my layout:
layouts/index.js:
export const pageQuery = graphql`
query IndexQuery {
site {
siteMetadata {
title
}
}
allJsFrontmatter(
filter: { data: { isWork: { eq: true } } }
sort: { fields: [data___date], order: DESC }
) {
edges {
node {
data {
error
title
path
cover {
childImageSharp {
sizes(maxWidth: 1400, quality: 95) {
...GatsbyImageSharpSizes_withWebp
}
}
}
}
}
}
}
}
`;
pages/page.js:
export const data = {
isWork: true,
subtitle: 'Subtitle.',
title: 'Title.',
date: '2017-04-01',
path: '/page',
cover: './cover.png',
};
This worked in the past (and still works on production/netlify). However, now locally it gives me these errors on both gatsby develop
and gatsby build
:
The GraphQL query from /src/layouts/index.js failed
Errors:
GraphQLError: Path must be a string. Received undefined,GraphQLError: Path must be a string. Received undefined,GraphQLError: Path must be a string. Received undefined,GraphQLError: Path must be a string. Received undefined,GraphQLError: Path must be a string. Received undefined
It seems to me that the layout somehow doesn’t receive the correct path for the cover
data item (which referencing an existing image in the same folder). This is possibly related to #1819, no answers there.
I’m on node 8.5.0 (also tested with 6.9.2), and gatsby-cli 1.1.20. Tried reinstalling and rebuilding everything, but no change.
Thanks!
Issue Analytics
- State:
- Created 6 years ago
- Comments:11 (11 by maintainers)
Top Results From Across the Web
Using the Gatsby Image plugin
Decide which component to use. The Gatsby Image plugin includes two image components: one for static and one for dynamic images. The simplest...
Read more >responsive gatsby image in flexbox container - Stack Overflow
I would like all my images the same size and height and they should be responsive for mobile and desktop. Is this the...
Read more >Using Gatsby Image
gatsby-image is the official Image component for use in building Gatsby websites. It provides the fastest, most optimized image loading performance possible ...
Read more >Understand Responsive Images Through gatsby-image
I rebuilt my website with Gatsby and had to use the gatsby-image plugin to render images. At first, I thought all I needed...
Read more >Understanding gatsby-image (Part 3): Controlling sizes ...
If you want more control over which image sizes are generated by gatsby-plugin-sharp you can use the srcSetBreakpoints parameter in your fluid query....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Fixed!
@pieh, you’re my hero. Thank you for getting this working.
I will take a look at this later today. Probably will have to starting debugging from gatsby-transform-sharp resolver or in core with File related inferring stuff where I would assume this error is thrown and examine why does it happen.