You can't use childImageSharp together with

Question

Since I updated my gatsby dependencies i get an error with "childImageSharp" on the build process:

You can't use childImageSharp together with 2021-06-10-test.md.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined

So my component looks like the following:

//src/components/PostCover/index.jsx

import React, { Component } from "react";
import { StaticQuery, graphql } from "gatsby";
import PostCover from "./PostCoverComponent";

class queryWrapper extends Component {
  render() {
    const { postNode, coverHeight, coverClassName } = this.props;
    return (
      <StaticQuery
        query={graphql`
          query CoverQuery {
            allFile {
              edges {
                node {
                  id
                  absolutePath
                  childImageSharp {
                    id
                    resolutions {
                      base64
                      tracedSVG
                      aspectRatio
                      width
                      height
                      src
                      srcSet
                      srcWebp
                      srcSetWebp
                      originalName
                    }
                    internal {
                      contentDigest
                      type
                      owner
                    }
                    fluid(maxWidth: 1240) {
                      ...GatsbyImageSharpFluid
                      originalName
                    }
                  }
                }
              }
            }
          }
        `}
        render={data => (
          <PostCover
            fileEdges={data.allFile.edges}
            postNode={postNode}
            coverHeight={coverHeight}
            coverClassName={coverClassName}
          />
        )}
      />
    );
  }
}

export default queryWrapper;

// src/components/PostCover/PostCoverComponent.jsx

import React, { Component } from "react";
import Img from "gatsby-image";
import path from "path";
import "./PostCover.scss";

class PostCover extends Component {
  render() {
    const { fileEdges, postNode, coverHeight, coverClassName } = this.props;
    const post = postNode.frontmatter ? postNode.frontmatter : postNode;
    const coverNodeList = fileEdges.filter(fileNode => {
      if (fileNode.node.childImageSharp === null) return false;

      if (
        fileNode.node.absolutePath.indexOf(
          path.join("/static/assets/", post.cover)
        ) !== -1
      )
        return true;

      if (fileNode.node.absolutePath.indexOf(path.join("/", post.cover)) !== -1)
        return true;

      return false;
    });

    if (coverNodeList.length === 1) {
      return (
        <Img
          fluid={coverNodeList[0].node.childImageSharp.fluid}
          outerWrapperClassName={coverClassName}
          style={{ height: coverHeight, width: "100%" }}
        />
      );
    }

    /* eslint no-undef: "off" */
    const coverURL =
      post.cover.substring(0, 1) === "/"
        ? __PATH_PREFIX__ + post.cover
        : post.cover;
    return (
      <div
        style={{
          backgroundImage: `url(${coverURL})`,
          height: `${coverHeight}px`
        }}
        className={coverClassName}
      />
    );
  }
}

export default PostCover;

in my gatsby-config.js I've set the path correctly

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "assets",
        path: `${__dirname}/static/assets/`
      }
    },

One example md file is generated like this:

---
title: test
date: 2021-06-10T00:05:22.590Z
cover: assets/clouds.jpg
slug: test
category: blah
tags:
  - bli
---
blub

I have "gatsby-transformer-sharp": "^2.5.3" in my package.json

I hope this information is enough to get some hint what has changed and what I need to fix now. I have the whole repo here. I would be really thankful if someone can point out whats wrong. As i said i hadn't this problem when i used "gatsby-transformer-sharp": "^2.1.19"

Answer 1

I had a similar problem but with svg files instead of md. In you graphQL query you are going through all the files and I guess your intention is to get childImageSharp image files. The warning comes because not all files you query goes through have childImageSharp, a markdown file does not have it.

Looking at your code, it seems in the graphQL query you are really interested only in image files, so you could filter .md files out by extension:

        query={graphql`
          query CoverQuery {
            allFile(filter: {extension: {ne: "md"}}) {
              edges {
                node {
                  id
                  absolutePath
                  childImageSharp {
                    id
                    resolutions {
                      base64
                      tracedSVG
                      aspectRatio
                      width
                      height
                      src
                      srcSet
                      srcWebp
                      srcSetWebp
                      originalName
                    }
                    internal {
                      contentDigest
                      type
                      owner
                    }
                    fluid(maxWidth: 1240) {
                      ...GatsbyImageSharpFluid
                      originalName
                    }
                  }
                }
              }
            }
          }
        `}