"Field "image" must not have a selection since type "String" has no subfields."

[kpennell]

Description

I love love love Gatsby...But I'm another person struggling 😭😭😭 for 12+ hours now with "Field "image" must not have a selection since type "String" has no subfields."

I'm trying to to use netlify-cms and gatsby (with several popular gatsby image plugins).

I think this is a relative paths image problem but nothing has helped. I really just need someone to look at my setup.

Research:
I tried the various suggestions found at this issues.
gatsby issue 4123 gatsby issue 11412 gatsby issue 11534 gatsby issue 2050 gatsby issue 3531gatsby remark plugin issue 2 netlify-cms issue 325

Steps to reproduce

Here's the pertinent parts of the code

`[bunch of imports]

const CoursePage = ({ data }) => {
  const { markdownRemark: post } = data
  return (
    <Layout>
      <p>{post.frontmatter.title}</p>
       <p> {post.html}  </p>
      />
    </Layout>
  )
}
export default CoursePage

export const CoursePageQuery = graphql`
  query CoursePage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
        image {
// everything works except when I put this

          childImageSharp { 
            fluid(maxWidth: 2048, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

Actual markdown for a course:

---
templateKey: single-course
title: intermediate React
date: 2019-04-15T16:43:29.834Z
description: An intermediate React course
difficulty: Intermediate
image: /img/gatsby-astronaut.png

---
what a course, what a course...what a course, what a coursewhat a course, what a course...what a course, what a course
what a course, what a course...what a course, what a course
what a course, what a course...what a course, what a course
what a course, what a course...what a course, what a course

Confirming that case and spelling are right

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `appendTo Material Gatsby`,
    description: "hi",
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,

    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-relative-images',
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
            
              maxWidth: 590,
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {
              destinationDir: 'static',
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-netlify-cms`,
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        // Add any options here
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // 'gatsby-plugin-offline',
  ],
}

gatsby-node.js

const path = require(`path`)
const { createFilePath } = require('gatsby-source-filesystem')
const { fmImagesToRelative } = require('gatsby-remark-relative-images')

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions

  return graphql(`
    {
      allMarkdownRemark(limit: 1000) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
        
              templateKey
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      result.errors.forEach(e => console.error(e.toString()))
      return Promise.reject(result.errors)
    }


    const posts = result.data.allMarkdownRemark.edges

    posts.forEach(edge => {
      const id = edge.node.id
      createPage({
        path: edge.node.fields.slug,
        tags: edge.node.frontmatter.tags,
        component: path.resolve(
          `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
        ),
        // additional data can be passed via context
        context: {
          id
        },
      })
    })
  })
}

  exports.onCreateNode = ({ node, actions, getNode }) => {
    const { createNodeField } = actions
    
    fmImagesToRelative(node)
  
    if (node.internal.type === `MarkdownRemark`) {
      const value = createFilePath({ node, getNode, basePath: `pages` })
      createNodeField({
        name: `slug`,
        node,
        value,
      })
    }
  }

package.json

relevant parts:

"gatsby-image": "^2.0.23",
  "gatsby-plugin-netlify": "^2.0.6",
  "gatsby-plugin-netlify-cms": "^3.0.9",
  "gatsby-plugin-purgecss": "^3.1.0",
  "gatsby-plugin-react-helmet": "^3.0.4",
  "gatsby-plugin-sass": "^2.0.7",
  "gatsby-plugin-sharp": "^2.0.15",
  "gatsby-remark-copy-linked-files": "^2.0.7",
  "gatsby-remark-images": "^3.0.1",
  "gatsby-remark-relative-images": "^0.2.1",
  "gatsby-source-filesystem": "^2.0.12",
  "gatsby-transformer-remark": "^2.1.15",
  "gatsby-transformer-sharp": "^2.1.9",
  "lodash": "^4.17.5",

All code here: https://github.com/kpennell/notworkinggatsbyrelativeimageproblem

Expected result

GraphQL should be able to query for the images (using the right path?) and have the transformers plugins work vs. only being able to query for a string.

Actual result

Infamous: "Field "image" must not have a selection since type "String" has no subfields."

Environment

 System:
    OS: macOS 10.14
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.4.0 - ~/.nvm/versions/node/v11.4.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v11.4.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 72.0.3626.119
    Firefox: 66.0.3
    Safari: 12.0
  npmPackages:
    gatsby: ^2.3.24 => 2.3.24 
    gatsby-image: ^2.0.34 => 2.0.34 
    gatsby-plugin-manifest: ^2.0.24 => 2.0.24 
    gatsby-plugin-material-ui: ^1.2.4 => 1.2.4 
    gatsby-plugin-netlify-cms: ^3.0.17 => 3.0.17 
    gatsby-plugin-offline: ^2.0.25 => 2.0.25 
    gatsby-plugin-react-helmet: ^3.0.10 => 3.0.10 
    gatsby-plugin-sharp: ^2.0.15 => 2.0.35 
    gatsby-remark-copy-linked-files: ^2.0.11 => 2.0.11 
    gatsby-remark-images: ^3.0.1 => 3.0.10 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.2 
    gatsby-source-filesystem: ^2.0.26 => 2.0.27 
    gatsby-transformer-remark: ^2.3.4 => 2.3.8 
    gatsby-transformer-sharp: ^2.1.9 => 2.1.18 
  npmGlobalPackages:
    gatsby-cli: 2.4.14

[jonniebigodes]

@kpennell if you don't mind the wait, i'm cloning your repo and i'm going to create a detailed answer to your issue probably still tonight or at the very latest tomorrow. Sounds good?

[kpennell]

@jonniebigodes Thanks so much...and for responding to probably a half dozen of these now. Really wish you didn't have to

[kpennell]

I think I figured it out. In Gatsby-config, the order of plugins does matter here:

Not only that, it'll be best if you include 'gatsby-transformer-sharp' 'gatsby-plugin-sharp' and 'gatsby-transformer-remark' before any other plugin in gatsby-config.js. Not doing this will definitely lead to 'Field "image" must not have a selection since type "String" has no subfields' error.

from here: https://theleakycauldronblog.com/blog/problems-with-gatsby-image-and-their-workarounds/

module.exports = {
  siteMetadata: {
    title: `appendTo Material Gatsby`,
    description: "hi",
    author: `@gatsbyjs`,
  },
  plugins: [
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-relative-images',
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
            
              maxWidth: 590,
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {
              destinationDir: 'static',
            },
          },
        ],
      },
    },
    `gatsby-plugin-react-helmet`,

    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-netlify-cms`,
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        // Add any options here
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // 'gatsby-plugin-offline',
  ],
}

Hoping this helps someone in the future. Thank you @jonniebigodes

[jonniebigodes]

@kpennell no need to thank. Glad you managed to figure it out.

[kpennell]

It was hell...but I did learn a lot.

…

On Thu, Apr 18, 2019 at 4:42 PM jonniebigodes ***@***.***> wrote: @kpennell <https://github.com/kpennell> no need to thank. Glad you managed to figure it out. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#13469 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAIC4IO7O3PZDUROZXIPL2LPREBOXANCNFSM4HHANQPQ> .

[kenold]

In Gatsby-config, the order of plugins does matter here:
This solved it for me. I moved these to the top of the plugins list. Thank you @kpennell

'gatsby-plugin-sharp',
'gatsby-transformer-sharp',

[kpennell]

@kenold uh, yeah...like my answer above.

[kenold]

@kpennell I thanked you in my comment :-). For some reasons, it's happening again but on a different computer. Strange!

Fixed: I had an empty image string in my frontmatter like this: image: ""
I remove it and everything is working OK now.

[kpennell]

@kenold glad it helped. Hopefully you spent much less time than I did.

[scotNZ]

This error seems to occur if the referenced image file(s) does not exist.

Not exactly sure why and the error message is little help.

In summary, check image files are correctly named and located as per the query.

[SceptreData]

I had to tackle this twice using ForestryCMS.
Was building a new site using this gatsby starter.. While it deployed correctly the first time I used it, when I returned I was greeted with the terrible "image" must not have a selection since type "string" has no subfields.

In the end I made a lot of changes, and I'm not too sure what specifically was the cause of the issue. I reordered my gatsby-config so that gatsby-source-filesystem for my asset folder was the first plugin loaded. In addition, the next three plugins I loaded were the gatsby-plugin-sharp, gatsby-transformer-sharp and then gatsby-transformer-remark.

Then, moving to my gatsby-node.js, I added this bit of code, related to gatsby-remark-relative-images. Still, nothing worked, and I was pulling my hair out by this point.

Finally, after much groaning, I found a repo that had added "pathFields" option to gatsby-remark-normalize-paths. I have no idea what this option does. The documentation for normalize-paths just says "Note: If you don’t want this plugin delete empty frontmatter of some fields, you need to specify pathFields", and that's all it says on the matter of pathFields.

But I threw it in anyway. And lo and behold! It worked!
{ resolve: "gatsby-remark-normalize-paths", options: { pathFields: ["image", "cover"] }, },

I took a break for a few hours, very happy that I had somehow fixed my error. Only to find it had returned! Luckily, this time it was for a good reason: one of my blog posts contained a reference to an image that no longer existed. It took me a while to narrow this down... the error message was frustratingly cryptic. It made no mention of the file that was referencing the missing image, so I had to go through it piece by piece.

Oh well. At least it works. For now.

I hope this helps someone else on their adventures.

[drewes]

If anybody is struggling with this issue with MDX, remember this little jewel from the docs:

Then configure the plugins. gatsby-source-filesystem needs to be pointed at wherever you have your images on disk, gatsby-remark-images needs to be both a sub-plugin of gatsby-plugin-mdxand a string entry in the plugins array, and gatsby-plugin-sharp can be included on its own.

[runchuks]

Hello. I have the same problem and none of these suggestions help. Plugin order don't work. I am using Forestry CMS and deploying site in Netlify.
This code works on Netlify
image{ childImageSharp { fluid(maxWidth: 200, quality: 100) { ...GatsbyImageSharpFluid } } }
But on my local development server it shows error.
Someone else got the error after changing plugin order? I even deleted .cache, public and node_modules folders and did npm i but nothing works. I kinda don't want reinstall PC to Ubuntu 😄

[pvaladez]

@runchuks - yeah it seems like gatsby-transformer-remark or one of the plugins is not friendly with Windows. I was trying to get it working for other people's benefit, but I know that Linux and MacOS don't have this problem.

Definitely set up WSL2 Ubuntu for Windows... I've been using it and I don't have this issue.

[zolbayars]

Tried the following things without luck:

• Moved the gatsby-transformer-sharp, gatsby-plugin-sharp, gatsby-transformer-remark, etc on top of the plugin list
• Re-tried on Ubuntu 20.04 (I naively thought that WIndows was somehow the culprit)

[Isaac-Tait]

I was having this issue too. Moving gatsby-transformer-sharp, gatsby-plugin-sharp, to the top of the gatsby-config.js file did not work. The problem was in my frontmatter. When I created a new blog post somehow the frontmatter image was formatted incorrectly (I am using Netlify CMS). It was

---
<my frontmatter>
image: .myphoto.jpg
<rest of my frontmatter >
---

and it should have been

---
<my frontmatter>
image: ./myphoto.jpg
<rest of my frontmatter >
---