Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rileyamos opened this issue Nov 24, 2019 · 38 comments
Assignees

Comments

@rileyamos
Copy link

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:

featuredimageError

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
Copy link

Atchett commented Nov 24, 2019

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
Copy link

chocobuckle commented Nov 24, 2019

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
Copy link
Author

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

@vladar vladar self-assigned this Nov 25, 2019
@vladar
Copy link
Contributor

vladar commented Nov 25, 2019

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
Copy link
Contributor

vladar commented Nov 25, 2019

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

@dan-mba
Copy link
Contributor

dan-mba commented Nov 25, 2019

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
Copy link

Atchett commented Nov 25, 2019

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
Copy link

Atchett commented Nov 25, 2019

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
Copy link
Contributor

vladar commented Nov 26, 2019

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.

@vladar vladar added the status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. label Nov 26, 2019
@eur2
Copy link

eur2 commented Nov 27, 2019

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
Copy link

eur2 commented Nov 27, 2019

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

@laradevitt
Copy link
Contributor

laradevitt commented Nov 27, 2019

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
Copy link

eur2 commented Nov 27, 2019

@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
Copy link
Contributor

laradevitt commented Nov 27, 2019

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

@Atchett
Copy link

Atchett commented Nov 27, 2019

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
Copy link

megant commented Nov 27, 2019

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

@laradevitt
Copy link
Contributor

laradevitt commented Nov 28, 2019

@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
Copy link
Contributor

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

@Atchett
Copy link

Atchett commented Nov 28, 2019

@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 - #19781 are you using any of these?

@dan-mba
Copy link
Contributor

dan-mba commented Nov 28, 2019

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
Copy link
Contributor

freiksenet commented Nov 28, 2019

@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
Copy link
Contributor

dan-mba commented Nov 28, 2019

@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
Copy link
Contributor

@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
Copy link
Contributor

dan-mba commented Nov 28, 2019

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

@megant
Copy link

megant commented Nov 28, 2019

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

@Atchett
Copy link

Atchett commented Nov 28, 2019

@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
Copy link
Contributor

@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
Copy link
Contributor

dan-mba commented Nov 28, 2019

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

@vladar
Copy link
Contributor

vladar commented Nov 29, 2019

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!

@vladar vladar closed this as completed Nov 29, 2019
@vladar vladar removed the status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. label Nov 29, 2019
@Arno500
Copy link

Arno500 commented Dec 27, 2019

Probably: #19876

@antonlvovych
Copy link

gatsby@2.24.23 - still occurs

@brynner
Copy link

brynner commented Nov 2, 2020

gatsby@2.24.91 - still occurs

@osogrizz
Copy link
Contributor

osogrizz commented Nov 19, 2020

gatsby@2.20.25 - still occurs

@Ameobea
Copy link
Contributor

Ameobea commented Jan 14, 2021

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests