question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[gatsby-transformer-javascript-static-exports] Usage with `gatsby-image`

See original GitHub issue

Hi! 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:closed
  • Created 6 years ago
  • Comments:11 (11 by maintainers)

github_iconTop GitHub Comments

3reactions
cwgwcommented, Feb 14, 2018

Fixed!

@pieh, you’re my hero. Thank you for getting this working.

1reaction
piehcommented, Feb 13, 2018

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found