Gatsby fails on build when querying an Attachment field. No childImageSharp.

[szemyd]

This plugin is extremely useful, I have been building the third project with it.

Now, however with my latest project I would like to optimize the image that are being pulled in, by using the example here that uses gatsby-transform-sharp.

I have tried to debug for a few days now, here is the most noteworthy behaviour:

When I query childImageSharp, it seems to exist:

However when I try to get the width property gatsby fails without warning and gives me back this message in graphql:

I have tried reinstalling, changing the order of the plugins, trying different names for the variable, narrowing the database down to 1 row, so that I don't get error for empty fields, taken out all query except one to be sure that is the problem.

Here are the dependencies I am using:

{
  "name": "HH",
  "description": "D",
  "version": "1.0.0",
  "author": "",
  "dependencies": {
    "antd": "^3.24.2",
    "babel-plugin-styled-components": "^1.10.6",
    "gatsby": "^2.18.5",
    "gatsby-image": "^2.2.33",
    "gatsby-plugin-catch-links": "^2.0.13",
    "gatsby-plugin-feed": "^2.2.0",
    "gatsby-plugin-google-analytics": "^2.0.19",
    "gatsby-plugin-lodash": "^3.0.5",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-nprogress": "^2.0.10",
    "gatsby-plugin-offline": "^2.1.0",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sharp": "^2.3.2",
    "gatsby-plugin-sitemap": "^2.1.0",
    "gatsby-plugin-styled-components": "^3.1.13",
    "gatsby-plugin-twitter": "^2.0.13",
    "gatsby-remark-autolink-headers": "^2.0.16",
    "gatsby-remark-copy-linked-files": "^2.0.12",
    "gatsby-remark-images": "^3.0.11",
    "gatsby-remark-prismjs": "^3.2.9",
    "gatsby-remark-responsive-iframe": "^2.1.1",
    "gatsby-source-airtable": "^2.0.12",
    "gatsby-source-filesystem": "^2.1.38",
    "gatsby-transformer-remark": "^2.3.12",
    "gatsby-transformer-sharp": "^2.3.6",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "prismjs": "^1.16.0",
    "react-cookie-consent": "^2.4.0",
    "react-disqus-comments": "^1.4.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-mailchimp-subscribe": "^2.1.0",
    "react-player": "^1.12.0",
    "react-share": "^2.4.0",
    "react-twitter-embed": "^3.0.3",
    "react-twitter-widgets": "^1.7.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1",
    "styled-components": "^4.3.2",
    "url-join": "^4.0.0"
  },
  "devDependencies": {
    "cli-glob": "^0.1.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.2.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "gh-pages": "^2.0.1",
    "prettier": "^1.17.0",
    "remark-cli": "^6.0.1",
    "remark-preset-lint-recommended": "^3.0.2",
    "stylefmt": "^6.0.3",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0",
    "write-good": "^1.0.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "",
  "main": "n/a",
  "scripts": {
    "develop": "gatsby develop",
    "dev": "npm run develop",
    "serve": "gatsby serve",
    "build": "gatsby build",
    "build:pp": "gatsby build --prefix-paths",
    "build:gh": "npm run clean && npm run build:pp && gh-pages -d public",
    "clean": "rm -rf public && rm -rf .cache",
    "lint:js": "eslint --ext .js,.jsx .",
    "format:js": "prettier '**/*.{js,jsx}' --write"
  },
  "remarkConfig": {
    "plugins": [
      "remark-preset-lint-recommended"
    ]
  }
}

and my config file:

`const urljoin = require("url-join");
const config = require("./data/SiteConfig");
require("dotenv").config({
  path: '.env.${process.env.NODE_ENV}',
})

module.exports = {
  pathPrefix: config.pathPrefix === "" ? "/" : config.pathPrefix,
  siteMetadata: {
    siteUrl: urljoin(config.siteUrl, config.pathPrefix),
    rssMetadata: {
      site_url: urljoin(config.siteUrl, config.pathPrefix),
      feed_url: urljoin(config.siteUrl, config.pathPrefix, config.siteRss),
      title: config.siteTitle,
      description: config.siteDescription,
      image_url: '${urljoin(
        config.siteUrl,
        config.pathPrefix
      )}/logos/logo_favicon.png',
      copyright: config.copyright
    }
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-styled-components',
      // options: {
      //   // Add any options here
      // }
    },
    // {
    //   resolve: 'gatsby-source-filesystem',
    //   options: {
    //     name: 'src',
    //     path: '${__dirname}/src/',
    //   },
    // },

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "assets",
        path: '${__dirname}/static/'
      }
    },
    {
      resolve: 'gatsby-source-airtable',
      options: {
        apiKey: process.env.AIRTABLE_API_KEY, // specify via env
        tables: [
          {
            baseId: process.env.AIRTABLE_BASE, // specify via env
            tableName: process.env.AIRTABLE_TABLE_NAME, // specify via env
            tableView:'published',
            queryName: 'posts', // optional
            mapping: { myimage: 'fileNode' },
            tableLinks: ['reviews', 'brand']
          },
          {
            baseId: process.env.AIRTABLE_BASE,
            tableName: process.env.AIRTABLE_TABLE_NAME_LINKED
          },
          {
            baseId: process.env.AIRTABLE_BASE,
            tableName: process.env.AIRTABLE_TABLE_NAME_LINKED2
          }
        ]
      }
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 690
            }
          },
          {
            resolve: "gatsby-remark-responsive-iframe"
          },
          "gatsby-remark-prismjs",
          "gatsby-remark-copy-linked-files",
          "gatsby-remark-autolink-headers"
        ]
      }
    },
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: config.googleAnalyticsID
      }
    },
    {
      resolve: "gatsby-plugin-nprogress",
      options: {
        color: config.themeColor
      }
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-catch-links",
    "gatsby-plugin-twitter",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: config.siteTitle,
        short_name: config.siteTitleShort,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: "minimal-ui",
        icons: [
          {
            src: "/logos/logo_favicon.png",
            sizes: "192x192",
            type: "image/png"
          },
          {
            src: "/logos/logo_favicon.png",
            sizes: "512x512",
            type: "image/png"
          }
        ]

      }
    },
    "gatsby-plugin-offline",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-lodash",
    {
      resolve: "gatsby-plugin-feed",
      options: {
        setup(ref) {
          const ret = ref.query.site.siteMetadata.rssMetadata;
          ret.allMarkdownRemark = ref.query.allMarkdownRemark;
          ret.generator = "HardwareHero";
          return ret;
        },
        query: '
        {
          site {
            siteMetadata {
              rssMetadata {
                site_url
                feed_url
                title
                description
                image_url
                copyright
              }
            }
          }
        }
      ',
        feeds: [
          {
            serialize(ctx) {
              const { rssMetadata } = ctx.query.site.siteMetadata;
              return ctx.query.allAirtable.edges.map(edge => ({
                date: edge.node.data.date,
                title: edge.node.data.title,
                url: rssMetadata.site_url + "/" + edge.node.data.slug,
                guid: rssMetadata.site_url + "/" + edge.node.data.slug,
                custom_elements: [
                  { reviews: edge.node.data.reviews ? edge.node.data.reviews[0].data.score : null },
                  { brand: edge.node.data.brand ? edge.node.data.brand[0].data.name : null },
                  { category: edge.node.data.category }
                ]
              }));
            },
            query: `
            {
              allAirtable(
                limit: 1000
                sort: {fields: data___date, order: DESC}
                filter: {data: {status: {eq: "publish"}}}
              ) {
                edges {
                  node {
                    data {
                      slug
                      date
                      title
                      tags
                      price
                      category
                      brand {
                        data{
                          name
                        }
                      }
                    }
                  }
                }
              }
            }
            ',
            output: config.siteRss
          }
        ]
      }
    }
  ]
};
`

Here is my query:

export const pageQuery = graphql`
  query IndexQuery($dateFormat: String) {
    allAirtable(
      limit: 2000
      sort: {fields: data___date, order: DESC}
      filter: { data : { tags: { eq: "Phone" }, status: {eq: "publish"} } }
    ) {
      edges {
        node {
          data {
            slug
            date(formatString: $dateFormat)
            title
            tags
            category
            myimage {
              localFiles{
                childImageSharp {
                  fluid{
                    src
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

[jbolda]

👋 Just a quick look here, but it looks like only one of your two nodes has an image. That could potentially be giving you issues. That isn't a great outcome, but let's figure out the problem first and then decide how to deal with it. You can try filtering down to one specific node id with a picture or you could try adding pictures to all of your nodes (or make a view in airtable to only show rows with pictures).

[szemyd]

Thanks for checking this out! Unfortunately, this might then be some problem when the images are pulled in, as both of my nodes have pictures in them.

I have thought that this might be a problem (and actually I also figured out that it broke when one of the images had too long of a name, so I changed it), so I created the test setup where it only sources two nodes with fully filled in data.

[szemyd]

I also get this error, if I don't run 'gatsby clean' before running the development server:

[jbolda]

Have you had any luck since your response? It sounds like the most recent gatsby features have become more strict/revealed bugs in various plugins, and part of me is hoping that this fixed itself 🤞 .

[szemyd]

Unfortunately no. I have wasted a lot of time and had to push forward so I reverted back to simply getting the raw source url from airtable (it is linking now to the airtable url of the attachment). I will have to look at it again soon, as this will break if there are too many visitors and therefore requests to airtable.

If you need more details on the bug I would be more than happy to support the resolution of this!

[jbolda]

Well, that is certainly unfortunate. Nothing is jumping out at me with the information supplied. Do you have any more details that you are able to share? Would you be able to confirm if images through ImageSharp works local (e.g. using gatsby-source-filesystem)? Trying to eliminate possible causes to help us focus.

[dylanjha]

@szemy2 @jbolda I'm getting this same error:

You specified a fileNode, but we caught an error. First check that you have gatsby-source-filesystem installed

My airtable query looks like this:

  {
    allAirtable(filter: { table: { eq: "People" } }, sort: { fields: data___Last_Name, order: ASC }) {
      edges {
        node {
          id
          data {
            Full_Name
            Photo {
              localFiles {
                childImageSharp {
                  fixed(width: 230) {
                    src
                    srcSet
                  }
                }
              }
            }
            Secondary_Photo {
              localFiles {
                childImageSharp {
                  fixed(width: 230) {
                    src
                    srcSet
                  }
                }
              }
            }
          }
        }
      }
    }
  }

I consistently get this error for two out of the 35 records:

You specified a fileNode, but we caught an error. First check that you have gatsby-source-filesystem installed?
 failed to process https://dl.airtable.com/.attachments/94fabf62edce893d71a1141bb26adf7a/4ef4595f/chandler-square
Error: ENOENT: no such file or directory, stat '/code/my-project/.cache/gatsby-source-filesystem/2f049e3c8032db10f1047d1f8b58ff21/dylan-square'

When I check that folder in my local .cache I see a file called dylan-square.jpg... maybe that's a clue? But all the other 35 records seem to be cached the same way, I don't know why these two are failing.

[jbolda]

That is super odd, @dylanjha. Could you let me know the exact versions that you are using this plugin, this plugin's airtable dependency and gatsby-source-filesystem? Something is different with the setups you both have and what it tested in this repo (and on my other projects).

[jbolda]

Also, what operating systems are you both using?

[dylanjha]

• gatsby-source-airtable@^2.0.10:
• gatsby-source-filesystem@^2.1.38
• Mac OS Catalina 10.15.1

[jbolda]

Hmm, well the update on gatsby-source-filesystem at that version was https://github.com/gatsbyjs/gatsby/pull/19600, but that feels odd that Mac is affected by that. Does downgrading below that version fix anything? @szemy2 what OS are you on?

[szemyd]

Hi, I am running:

• "gatsby-source-airtable": "^2.0.12",
• "gatsby-source-filesystem": "^2.1.38",
• Windows 10 Pro, Version 1903

[jbolda]

Hmm different OS so I will assume that OS is not related to the issue. We are at this portion of the code which the only thing of substance that could have changed there is createRemoteFileNode. That function comes from gatsby-source-filesystem.

I have not seen any failures on my end, so I imagine it's something to do with the filenames of these specific attachments (which could also mean the download url) or an update to the filesystem source. If you try downgraded versions of the filesystem source and the issue persists, I presume it's the former.

[dylanjha]

That's exactly where I was looking. I actually think it had to do with the original uploaded filename not containing an extension. "dylan-square" vs. "dylan-square.jpg". I haven't gotten a chance to find the codepath where that breaks but the records that were breaking for me did not have an extension on the original image filename. Maybe give that a try?

When I removed the image from airtable, re-named the file to have an extension and then re-uploaded it into the same field then the issue was fixed.

[brohlson]

I've been running into this issue too, I found this combo to be successful:

  "dependencies": {
    "gatsby": "^2.18.16",
    "gatsby-image": "^2.2.6",
    "gatsby-plugin-manifest": "^2.2.34",
    "gatsby-plugin-sharp": "^2.3.10",
    "gatsby-source-airtable": "^2.0.12",
    "gatsby-source-filesystem": "^2.1.3",
    "gatsby-transformer-sharp": "^2.3.9",
  },

I'm pulling down a ton of high resolution images. It'll fail sometimes, but clearing the cache usually helps.

[jamessimone]

@brohlson ah. If that’s the case, this is most likely related to this issue: https://github.com/gatsbyjs/gatsby/issues/6291#issuecomment-505097465 - there is a PR in the underlying repo for sharp which hasn’t been merged yet due to the holidays, and lack of time for testing, but one of the Gatsby team members has been pushing to get this issue resolved.

[brohlson]

@brohlson ah. If that’s the case, this is most likely related to this issue: gatsbyjs/gatsby#6291 (comment) - there is a PR in the underlying repo for sharp which hasn’t been merged yet due to the holidays, and lack of time for testing, but one of the Gatsby team members has been pushing to get this issue resolved.

Totally hit that issue as well, the source-filesystem issue is what I was referring to. Thanks for the note, good to hear they're pushing for a fix.

[jbolda]

Has anyone made further progress on this with updates?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any recent activity for 30 days. It will be closed if no further activity occurs within 7 days. Remove stale label, comment, and/or apply "ongoing issue" label to prevent this from being closed. Thank you for your contributions.

[dgrcode]

I'm having a similar issue. Not sure if it comes from the same place as other issues reported above, but in our case it seems to be related with the file name being to long and being ellipsized.

Downloading the file from airtable saves the file with the extension, but this plugin seems to be taking the ellipsized name. Then, other plugins down the pipe don't know how to process the image without extension.

Do maintainers think this could be the root cause of the problems raised here? Should I open a separate issue to track my problem?

[dgrcode]

I tracked down with @carletex the issue we were having. I'm not sure if the root cause is the same as the original post in this issue, so I'll open a new issue to discuss next steps

Edit, I opened issue #170 to track it.