search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.29k stars 10.31k forks source link

Field "image" must not have a selection since type "String" has no subfields, when changing specific .md file #27273

Closed chrisklanten closed 4 years ago

chrisklanten commented 4 years ago

Description

Im getting 3 error's when changing a specific .md file (/src/pages/home/index.md)

But, when i change other .md files (like src/pages/diensten/index.md) everything runs smoothly...

Steps to reproduce

  1. fork https://github.com/chrisklanten/evisieConsultancy/tree/graphqlerror
  2. run npm i
  3. run npm start You will see everything works fine.
  4. change /src/pages/home/index.md
  5. check console for image errors
  6. try changing src/pages/diensten/index.md and everything works fine...

Expected result

Clean build, like changing the other .md files.

Actual result

GraphQL Errors on 3 image fields: Field "logo" must not have a selection since type "String" has no subfields.

Environment

System: OS: macOS 10.15.6 CPU: (8) x64 Intel(R) Core(TM) i7-3635QM CPU @ 2.40GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.14.0 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/local/bin/python Browsers: Chrome: 85.0.4183.121 Firefox: 80.0.1 Safari: 13.1.2 npmPackages: gatsby: ^2.24.67 => 2.24.67 gatsby-image: ^2.4.20 => 2.4.20 gatsby-plugin-gtag: ^1.0.13 => 1.0.13 gatsby-plugin-netlify: ^2.3.16 => 2.3.16 gatsby-plugin-netlify-cms: ^4.3.15 => 4.3.15 gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0 gatsby-plugin-postcss: ^2.3.13 => 2.3.13 gatsby-plugin-purgecss: ^5.0.0 => 5.0.0 gatsby-plugin-react-helmet: ^3.3.12 => 3.3.12 gatsby-plugin-sass: ^2.3.14 => 2.3.14 gatsby-plugin-scroll-reveal: 0.0.7 => 0.0.7 gatsby-plugin-sharp: ^2.6.38 => 2.6.38 gatsby-remark-copy-linked-files: ^2.3.18 => 2.3.18 gatsby-remark-images: ^3.3.32 => 3.3.32 gatsby-remark-normalize-paths: ^1.1.0 => 1.1.0 gatsby-remark-relative-images: ^0.3.0 => 0.3.0 gatsby-source-filesystem: ^2.3.32 => 2.3.32 gatsby-transformer-remark: ^2.8.37 => 2.8.37 gatsby-transformer-sharp: ^2.5.16 => 2.5.16 npmGlobalPackages: gatsby-cli: 2.12.51

pvdz commented 4 years ago

I suspect it's because the markdown has

  mainImage: /img/evisie_consultancy_byliekevroomen-10.jpg

which was not converted to an image but rather kept as a string.

Please take a look at the docs: https://www.gatsbyjs.com/docs/working-with-images-in-markdown/

If I change the path in that line to:

  mainImage: ../../../static/img/evisie_consultancy_byliekevroomen-10.jpg

(same the others) then it works.

(Have you checked http://localhost:8000/___graphql ? It would tell you it was an image if it thought it was and give you an option to add params to the query)

chrisklanten commented 4 years ago

Thanks @pvdz, yes i checked the graphql playground. The strange things is that with other pages containing images, I can point to /img/ without any problems.. Do you have any idea why one page has troubles with this, and other pages dont?

pvdz commented 4 years ago

tbh I'm not sure why it doesn't complain about this immediately, rather than only after an edit. There might be a bug in develop in how it reinterprets the paths for HMR or something.