After npm update, suddenly getting GRAPHQL ERROR - "featuredimage" must not have a selection since type "String" has no subfields

[rileyamos]

Description

Running gatsby develop yields the following errors:

Terminal:

ERROR #85909 GRAPHQL Field "featuredimage" must not have a selection since type "String" has no subfields

Browser:

Failed to compile Field "featuredimage" must not have a selection since type "String" has no subfields

Perviously my gatsby site was working fine (v2.13.57), then after running npm update this issue started happening.

Pre-Update Dependencies (package.json)

"dependencies": {
  "@reach/router": "^1.2.1",
  "bulma": "^0.7.5",
  "bulma-pricingtable": "^0.2.0",
  "dotenv": "^8.1.0",
  "fs": "0.0.1-security",
  "gatsby": "^2.13.57",
  "gatsby-awesome-pagination": "^0.3.5",
  "gatsby-image": "^2.0.23",
  "gatsby-plugin-netlify": "^2.0.6",
  "gatsby-plugin-netlify-cms": "^4.1.6",
  "gatsby-plugin-purgecss": "^4.0.0",
  "gatsby-plugin-react-helmet": "^3.0.4",
  "gatsby-plugin-sass": "^2.0.7",
  "gatsby-plugin-sharp": "^2.2.11",
  "gatsby-remark-copy-linked-files": "^2.0.7",
  "gatsby-remark-images": "^3.1.9",
  "gatsby-remark-relative-images": "^0.2.1",
  "gatsby-source-filesystem": "^2.0.26",
  "gatsby-transformer-json": "^2.2.8",
  "gatsby-transformer-remark": "^2.6.12",
  "gatsby-transformer-sharp": "^2.1.9",
  "lodash": "^4.17.5",
  "lodash-webpack-plugin": "^0.11.4",
  "netlify-cms-app": "^2.9.6",
  "node-sass": "^4.11.0",
  "parcel-bundler": "^1.9.4",
  "prop-types": "^15.6.0",
  "react": "^16.8.4",
  "react-accessible-accordion": "^3.0.0",
  "react-dom": "^16.8.4",
  "react-helmet": "^5.2.0",
  "react-modal": "^3.10.1",
  "react-user-avatar": "^1.10.0",
  "uuid": "^3.2.1"
},

Post-Update Dependencies (package.json)

"dependencies": {
  "@reach/router": "^1.2.1",
  "bulma": "^0.7.5",
  "bulma-pricingtable": "^0.2.0",
  "dotenv": "^8.2.0",
  "fs": "0.0.1-security",
  "gatsby": "^2.18.2",
  "gatsby-awesome-pagination": "^0.3.5",
  "gatsby-image": "^2.2.33",
  "gatsby-plugin-netlify": "^2.1.25",
  "gatsby-plugin-netlify-cms": "^4.1.28",
  "gatsby-plugin-purgecss": "^4.0.1",
  "gatsby-plugin-react-helmet": "^3.1.15",
  "gatsby-plugin-sass": "^2.1.23",
  "gatsby-plugin-sharp": "^2.3.2",
  "gatsby-remark-copy-linked-files": "^2.1.30",
  "gatsby-remark-images": "^3.1.33",
  "gatsby-remark-relative-images": "^0.2.3",
  "gatsby-source-filesystem": "^2.1.38",
  "gatsby-transformer-json": "^2.2.19",
  "gatsby-transformer-remark": "^2.6.37",
  "gatsby-transformer-sharp": "^2.3.5",
  "lodash": "^4.17.15",
  "lodash-webpack-plugin": "^0.11.4",
  "netlify-cms-app": "^2.9.7",
  "node-sass": "^4.13.0",
  "parcel-bundler": "^1.12.4",
  "prop-types": "^15.6.0",
  "react": "^16.12.0",
  "react-accessible-accordion": "^3.0.1",
  "react-dom": "^16.12.0",
  "react-helmet": "^5.2.0",
  "react-modal": "^3.11.1",
  "react-user-avatar": "^1.10.0",
  "uuid": "^3.3.3"
}

Troubleshooting

Running the following query in http://localhost:8000/___graphql shows that the images exist.

Query:

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
          featuredimage
        }
      }
    }
  }
}

Output:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
            "title": "Lorem Post One",
            "featuredimage": "../../../static/img/2019/07/01/waves.JPG"
            }
          }
        },
        {
          "node": {
            "frontmatter": {
            "title": "Lorem Post Two",
            "featuredimage": "../../../static/img/2019/07/08/Screen Shot 2019-07-08 at 12.29.52 PM.png"
            }
          }
        },
        {
          "node": {
            "frontmatter": {
            "title": "Lorem Post Three",
            "featuredimage": "../../../static/img/2019/08/21/Screen Shot 2019-08-21 at 9.22.55 AM.png"
            }
          }
        }
      ]
    }
  }
}

Running a query using childImageSharp results in the same error seen in the build.

Query:

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
          featuredimage {
            childImageSharp {
              src
              srcSet
            }
          }
        }
      }
    }
  }
}

ERROR:

Steps to reproduce

1. Run gatsby develop

Expected result

Build should succeed.

Actual result

Terminal Output:

info Deleting .cache, public
info Successfully deleted directories
success open and validate gatsby-configs - 0.087s
success load plugins - 2.158s
success onPreInit - 0.017s
success initialize cache - 0.034s
success copy gatsby files - 0.195s
success onPreBootstrap - 0.010s
success createSchemaCustomization - 0.037s
success source and transform nodes - 2.734s
success building schema - 0.605s
success createPages - 0.427s
success createPagesStatefully - 0.166s
success onPreExtractQueries - 0.005s
success update schema - 0.060s

 ERROR #85909  GRAPHQL

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

File: src/templates/blog-page.js:195:27

failed extract queries from components - 0.596s
success write out requires - 0.062s
success write out redirect data - 0.038s
success onPostBootstrap - 0.004s
⠀
info bootstrap finished - 12.762 s
⠀
success run queries - 1.016s - 112/112 110.18/s
info [HPM] Proxy created: /  ->  http://localhost:9000
info [HPM] Proxy rewrite rule created: "/.netlify/functions/" ~> ""

gatsby-plugin-purgecss: Only processing  /DemoSite/src/components/all.sass
⠀
You can now view DemoSite in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build

success Building development bundle - 19.297s
 DONE  Compiled successfully in 19891ms                      4:25:22 PM
⠀
 I  Netlify CMS is running at http://localhost:8000/admin/

Environment

  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.1.0 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.12.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 70.0
    Safari: 13.0.3
  npmPackages:
    gatsby: ^2.18.2 => 2.18.2 
    gatsby-awesome-pagination: ^0.3.5 => 0.3.5 
    gatsby-image: ^2.2.33 => 2.2.33 
    gatsby-plugin-netlify: ^2.1.25 => 2.1.25 
    gatsby-plugin-netlify-cms: ^4.1.28 => 4.1.28 
    gatsby-plugin-purgecss: ^4.0.1 => 4.0.1 
    gatsby-plugin-react-helmet: ^3.1.15 => 3.1.15 
    gatsby-plugin-sass: ^2.1.23 => 2.1.23 
    gatsby-plugin-sharp: ^2.3.2 => 2.3.2 
    gatsby-remark-copy-linked-files: ^2.1.30 => 2.1.30 
    gatsby-remark-images: ^3.1.33 => 3.1.33 
    gatsby-remark-relative-images: ^0.2.3 => 0.2.3 
    gatsby-source-filesystem: ^2.1.38 => 2.1.38 
    gatsby-transformer-json: ^2.2.19 => 2.2.19 
    gatsby-transformer-remark: ^2.6.37 => 2.6.37 
    gatsby-transformer-sharp: ^2.3.5 => 2.3.5 
  npmGlobalPackages:
    gatsby-cli: 2.6.10

I have read through all the similar issues related to this error message to no avail. Any help troubleshooting this would be greatly appreciated.

[Atchett]

I am also getting this same issue. Build stopped working following a ncu -u update across all packages. I ended up re-creating the site gatsby new {new test site} and copying the code across. Once confirmed it was all copied exactly the build worked. Checking the package versions, they were different. Downgraded site packages to new test site versions and the build worked. Have since updated just gatsby from 2.17.11 -> 2.18.2 and again the build breaks. Downgraded again and the build works. Seems to be something in the 2.18.2 version.

EDIT -

I have tested the build with package versions back from 2.18.2 and it starts working again at 2.17.17.

Version 2.17.17 throws the following error with this version during build (gatsby develop):

Unexpected key "inferenceMetadata" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "program", "nodes", "nodesByType", "resolvedNodesCache", "nodesTouched", "lastAction", "flattenedPlugins", "config", "pages", "schema", "status", "componentDataDependencies", "components", "staticQueryComponents", "jobs", "webpack", "webpackCompilationHash", "redirects", "babelrc", "schemaCustomization", "themes", "logs". Unexpected keys will be ignored.

Site still works though.

Version 2.17.16 - site works and no error thrown during build (gatsby develop). So It looks as if the problem, was introduced in version 2.18.0

[chocobuckle]

I'm getting the exact same error, but even downgrading to 2.17.16 isn't solving the problem. Build was working fine last week. I've made zero changes to my site's code since, but suddenly it won't build after running yarn upgrade-interactive --latest.

UPDATE: I can confirm that downgrading to v2.17.16 is working for me now. I had to delete yarn.lock and also pin v2.17.16. Run yarn add gatsby@2.17.16 --exact. In npm use the --save-exact flag. This is obviously just a temporary workaround though, and not a solution.

[rileyamos]

Thanks @Atchett, @chocobuckle. Confirming that downgrading to gatsby v2.17.16 works as a temporary fix.

[vladar]

Do you have a repo where I could reproduce this problem?

Also, given the output of your query, your featuredimage is a String. Do you know which plugin creates this field? Is it gatsby-remark-relative-images?

[vladar]

Have you tried this advice from the gatsby-remark-relative-images docs?

[dan-mba]

I am brand new to gatsby and seeing this problem on my repo.

What I did:

1. Used Deploy to netlify link to build gatsby site using this template
2. Cloned generated github repo to my machine.
3. npm install & npm update.
4. Committed updated package.json & package-lock.json to github (also removed yarn.lock as I use npm)

The build now fails with: error Field "featuredimage" must not have a selection since type "String" has no subfields failed extract queries from components - 0.500s

I haven't had time to change anything from the template as I updated to try to get rid of the audit warning for: gatsby > @gatsbyjs/relay-compiler > yargs > os-locale > mem

Any pointers to what in the template setup is not compatible with the update would be appreciated.

[Atchett]

Hi @dan-mba, Looks like you are using "gatsby": "^2.18.3", which appeared to contain somethign causing this issue. I did an "npm install --save gatsby@2.17.16" and the site builds without errors for me. I was seeing the same issue BTW.

[Atchett]

Have you tried this advice from the gatsby-remark-relative-images docs?

Hi @vladar, I saw this and tried it out but unfortunately it didn't make any difference for me. The only thing that worked was installing a previous version of Gatsby (as mentioned above). It does seem as if the problem starts happening from version 2.18.0.

[vladar]

The 2.18.0 release revealed problems in some plugins that directly mutate node data after a node has been created. Which is not supported or recommended by Gatsby.

So the best route to fix this is to identify plugins that mutate nodes aside from gatsby APIs and adding a fix to those plugins. To proceed with this we need a Minimal Reproduction repo.

If someone could provide it - that would help to solve the underlying issue. I suspect that gatsby-remark-relative-images is the plugin doing mutation but need a minimal reproduction to confirm.

[eur2]

After an upgrade from 2.7.15 to 2.8.4, I'm confirming the same problem and I'm using gatsby-remark-relative-images… All my image field are broken:

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

File: /Users/gd/GitHub/an20/src/components/layout.js

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

File: /Users/gd/GitHub/an20/src/pages/shop/index.js

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

File: /Users/gd/GitHub/an20/src/templates/postshop.js

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

File: /Users/gd/GitHub/an20/src/templates/postshop.js

@KyleAMathews It seems to me that the gatsby plugin ecosystem will be hard to maintain…

[eur2]

Also I have updated another gatsby project that isn't using the plugin gatsby-remark-relative-images and everything was working well.

[laradevitt]

Also seeing this error after updating to gatsby 2.18.4. Confirm that rolling back to gatsby 2.17.16 2.17.17 as suggested above fixes it.

$ gatsby info

  System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.1 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.7.2 - /c/Users/r2dfoo/AppData/Local/Programs/Python/Python37/python
  Browsers:
    Edge: 44.17763.831.0
  npmPackages:
    gatsby: 2.17.16 => 2.17.16
    gatsby-image: ^2.2.34 => 2.2.34
    gatsby-paginate: ^1.1.1 => 1.1.1
    gatsby-plugin-catch-links: ^2.1.18 => 2.1.18
    gatsby-plugin-favicon: ^3.1.6 => 3.1.6
    gatsby-plugin-google-analytics: ^2.1.29 => 2.1.29
    gatsby-plugin-layout: ^1.1.16 => 1.1.16
    gatsby-plugin-manifest: ^2.2.30 => 2.2.30
    gatsby-plugin-netlify: ^2.1.27 => 2.1.27
    gatsby-plugin-netlify-cms: ^4.1.29 => 4.1.29
    gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0
    gatsby-plugin-offline: ^2.2.10 => 2.2.10
    gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16
    gatsby-plugin-robots-txt: ^1.4.0 => 1.5.0
    gatsby-plugin-sass: ^2.1.24 => 2.1.24
    gatsby-plugin-sharp: ^2.3.4 => 2.3.4
    gatsby-plugin-sitemap: ^2.2.22 => 2.2.22
    gatsby-remark-component: ^1.1.3 => 1.1.3
    gatsby-remark-copy-linked-files: ^2.1.31 => 2.1.31
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-remark-grid-tables: 0.0.3 => 0.0.3
    gatsby-remark-images: ^2.0.6 => 2.0.6
    gatsby-source-filesystem: ^2.1.39 => 2.1.39
    gatsby-transformer-remark: ^2.6.38 => 2.6.38
    gatsby-transformer-sharp: ^2.3.6 => 2.3.6

Edit: Actually 2.17.17 is the most recent working version.

[eur2]

@laradevitt Seeing you're using gatsby-plugin-netlify-cms-paths and not gatsby-remark-relative-images. So it seems both packages are creating the problem.

[laradevitt]

[deleted] Oops, never mind, totally missed vladar's comment.

[Atchett]

Hi @vladar, sorry for the delay but I've put together a basic setup which can be used to replicate the issue - https://github.com/Atchett/Gatsby-Issue-Test. Hope this is of some use. Thanks

[megant]

Same problem here. I use gatsby-remark-relative-images too.

[laradevitt]

@Atchett - Perhaps strangely, I tested your repro and updated gatsby to v2.18.0 and no errors occurred with either gatsby build or gatsby develop.

Edit: I didn't see that you had provided instructions in the README, sorry! FWIW I've definitely confirmed the error occurs as described. This is a pretty minimal repo so should hopefully help track down the problem.

My project doesn't use gatsby-remark-relative-images and if I comment out gatsby-plugin-netlify-cms-paths in my gatsby-config.js the error still occurs. Still looking...

[moonmeister]

Can confirm i use gatsby-remark-relative-images and have this issue.

[Atchett]

@laradevitt No problem, and thanks for testing and following up. Interesting that your project doesn't use gatsby-remark-relative-images. Did you see the issue @vladar mentioned above - https://github.com/gatsbyjs/gatsby/pull/19781 are you using any of these?

[dan-mba]

I ran an npm update to pick up gatsby 2.18.5 and now get the following build error for several files:

ERROR #85910 GRAPHQL

Multiple "root" queries found in file: "IndexPageTemplate" and "IndexPageTemplate". Only the first ("IndexPageTemplate") will be registered.

Instead of: 1 | query IndexPageTemplate { 2 | bar { 3 | #... 4 | } 5 | } 6 | 7 | query IndexPageTemplate { 8 | foo { 9 | #... 10 | } 11 | }

Do: 1 | query indexPageTemplateAndIndexPageTemplate { 2 | bar { 3 | #... 4 | } 5 | foo { 6 | #... 7 | } 8 | }

File: src\templates\index-page.js

my current dependencies are: "bulma": "^0.8.0", "gatsby": "^2.18.5", "gatsby-image": "^2.2.34", "gatsby-plugin-netlify": "^2.1.27", "gatsby-plugin-netlify-cms": "^4.1.30", "gatsby-plugin-purgecss": "^4.0.0", "gatsby-plugin-react-helmet": "^3.1.16", "gatsby-plugin-sass": "^2.1.24", "gatsby-plugin-sharp": "^2.3.4", "gatsby-remark-copy-linked-files": "^2.1.31", "gatsby-remark-images": "^3.1.34", "gatsby-remark-relative-images": "^0.2.1", "gatsby-source-filesystem": "^2.1.39", "gatsby-transformer-remark": "^2.6.38", "gatsby-transformer-sharp": "^2.3.6", "lodash": "^4.17.15", "lodash-webpack-plugin": "^0.11.4", "netlify-cms-app": "^2.9.6", "netlify-cms-media-library-cloudinary": "^1.3.2", "netlify-cms-media-library-uploadcare": "^0.5.2", "node-sass": "^4.11.0", "parcel-bundler": "^1.9.4", "prop-types": "^15.6.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-helmet": "^5.2.0", "uuid": "^3.2.1"

Is this related to the changes made in #19781 ?

[freiksenet]

@dan-mba This sounds unrelated to this issue or PR, but it might be a bug introduced by #19665. Could you create a new issue ( with a reproduction if possible)?

[dan-mba]

@freiksenet I could create an issue, but I have no clue how to reproduce it. This is my first project using gatsby and all I have done is clone a starter repo & update (which caused build failure).

[laradevitt]

@Atchett - Thanks for pointing to that. I didn't look at initially because it was about a performance regression. It was merged into gatsby 2.18.5 (released 6 hours ago) which does indeed appear to fix my project as well as yours. 😄 ✋

Hi @dan-mba - If that's the case you could just link to the starter (if it's publicly available). But first try updating to gatsby 2.18.5.

[dan-mba]

@laradevitt I updated to 2.18.5 & got a new build error mentioned in this post. The starter repo I used is here.

[megant]

By the way: 2.18.5 kills gatsby-source-instagram plugin

[Atchett]

@laradevitt Thanks for the update. This does indeed fix the issue on my test site and my other site in which I initially spotted the issue. I'll take a look at the latest update for info on what was changed. Thanks to all.

[laradevitt]

@dan-mba - I think you should open a new issue.

@Atchett - Yeah, I'm still scratching my head about the source of the errors which may only be temporarily suppressed by this release. Let us know if you get any clues.

[dan-mba]

@laradevitt I opened #19863 for the new problem I am seeing

[vladar]

This should be "kind of" fixed in gatsby 2.18.5. See #19876 for the follow-up on a proper fix in plugins.

Kudos to @Atchett for the reproducible example!

[Arno500]

Probably: https://github.com/gatsbyjs/gatsby/issues/19876

[antonlvovych]

gatsby@2.24.23 - still occurs

[brynner]

gatsby@2.24.91 - still occurs

[osogrizz]

gatsby@2.20.25 - still occurs

[Ameobea]

What worked for me was to delete and re-generate yarn.lock and then run yarn to re-install all packages from scratch. This got rid of this and all other errors, and gatsby develop again works without issue.

[whyboris]

I had this error when I updated all my versions via ncu -u

I then deleted package-lock.json, ran npm install, gatsby clean, and when I ran npm start the error no longer appeared 🤷‍♂️

[ChristianChiarulli]

What worked for me was to delete and re-generate yarn.lock and then run yarn to re-install all packages from scratch. This got rid of this and all other errors, and gatsby develop again works without issue.

Everyone should try this first. It worked for me.

[toppsdown]

I then deleted package-lock.json, ran npm install, gatsby clean, and when I ran npm start the error no longer appeared 🤷‍♂️

This worked for me.

[sagoncalves]

I then deleted package-lock.json, ran npm install, gatsby clean, and when I ran npm start the error no longer appeared 🤷‍♂️

This worked for me too.