question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gastby Image not working after Netlify Build

See original GitHub issue

Description

I’m currently developing a simple site using Prismic, Gatsby and Netlify. When I use gatsby develop everything works and looks just like I would expect.

However, after Netlify builds, all of the gatsby-images do not work. Technically, the gatsby-image-wrapper is there in the DOM and the img that’s used for the blur-up is there too. What’s missing is the picture element.

In my console I am seeing this error: TypeError: Cannot read property 'childImageSharp' of undefined

When I inspect a log of the object in the console, I can drill down and see that the image is in the static file. Object => node => splash_imageSharp => fluid

If I copy the src and tack it onto the end of my URL I can see the image.

Steps to reproduce

Here is a link to the site. If you inspect the console you will see what I am talking about: https://modest-bell-fb1e56.netlify.app/

Expected result

I would expect the gatsby-image to work like it does when I use it locally.

Actual result

Gatsby Image is just a blurred image.

Environment

System: OS: macOS 10.15.3 CPU: (8) x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.9.0 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.13.7 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 81.0.4044.122 Firefox: 75.0 Safari: 13.0.5 npmPackages: gatsby: ^2.21.1 => 2.21.1 gatsby-image: ^2.4.0 => 2.4.0 gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1 gatsby-plugin-layout: ^1.3.0 => 1.3.0 gatsby-plugin-manifest: ^2.4.1 => 2.4.1 gatsby-plugin-offline: ^3.2.0 => 3.2.0 gatsby-plugin-react-helmet: ^3.3.0 => 3.3.0 gatsby-plugin-react-svg: ^3.0.0 => 3.0.0 gatsby-plugin-sass: ^2.3.0 => 2.3.0 gatsby-plugin-sharp: ^2.6.0 => 2.6.0 gatsby-plugin-sitemap: ^2.4.0 => 2.4.0 gatsby-source-filesystem: ^2.3.0 => 2.3.0 gatsby-source-prismic-graphql: ^3.6.2 => 3.6.2 gatsby-transformer-sharp: ^2.5.0 => 2.5.0 npmGlobalPackages: gatsby-cli: 2.4.8

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
bradleyDouglascommented, Apr 30, 2020

@chris-d, Yeah it does take a refactor, but it really wasn’t that hard. Maybe took 1-2 hours. This particular site I was working on was very small, but still an easy process to handle.

0reactions
MartinScherecommented, Jan 27, 2021

Same issue here. On build it’s not working…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Gatsby + Netlify image rendering issues - Support
Some images are not rendering in Netlify production site, even though it works fine locally or in other apps, like Vercel. sitename: codeforaustralia....
Read more >
Gatsby Image with Netlify CMSField "thumbnail" must not have ...
Run gatsby clean : cleans the cache. Then, gatsby develop the project again. · Check the media_folder and public_folder in your config. ·...
Read more >
Troubleshooting Common Errors - Gatsby
Field "image" must not have a selection since type "String" has no subfields; Problems installing sharp with gatsby-plugin-sharp - gyp ERR! build error ......
Read more >
gatsby image not showing when hosted in aws amplify, but ok ...
Try checking your redirects/rewrites to make sure Amplify isn't sending your image requests to index.html. Check the section "Redirects for ...
Read more >
Error: ENOENT: no such file or directory using Gatsby Image API
I'm getting this error when starting a Netlify build - it works in local development (the Graphql queries return images).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found