kakadiadarpan
commented
5 years ago @rchrdnsh have you tried one of the example sites that use gatsby-transformer-sharp? image-processing + using-gatsby-image are great examples of how to do things.
Closed rchrdnsh closed 5 years ago
kakadiadarpan
commented
5 years ago @rchrdnsh have you tried one of the example sites that use gatsby-transformer-sharp? image-processing + using-gatsby-image are great examples of how to do things.
rchrdnsh
commented
5 years ago yes, I followed the code examples in quite a few tutorials and projects, and everything was working perfectly fine. I then stopped the development server and started it again and it broke, with literally no change to the code at all in any way. I then stopped the server again and only renamed the images and updated the code and started the server again and it worked. Then, without changing any code at all, I stopped the dev server and re-started it again and it broke again. This seems very strange to me and outside of my actions. I could be wrong, or course, but I'm pretty stumped right now, and at least initially this feels like a Gatsby bug, but I'm out of my depths here, for sure.
rchrdnsh
commented
5 years ago hmmmmm...I might have found something...
So, I re-named the image files and updated the queries to reflect the name changes and then Gatsby re-generated the thumbnails and now the site works again, but I got a gang of warnings in the terminal:
Generating image thumbnails [==============----------------] 9/19 1.8 secs 47%
(sharp:1212): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject'
(sharp:1212): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed
Generating image thumbnails [================--------------] 10/19 2.2 secs 53%
(sharp:1212): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject'
(sharp:1212): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed
(sharp:1212): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject'
(sharp:1212): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed
Generating image thumbnails [==============================] 19/19 5.4 secs 100%Do these warnings mean anything to you? Nothing in the code has been changed at all, other than the names of the files and their associated names in the queries. That's it. I'm starting to notice that Gatsby-Image works fine for a while, and then suddenly stops working, and I have to change the names of the image files to make it work again. This has happened a couple times, so I'm thinking something is up somewhere beyond my code.
rchrdnsh
commented
5 years ago Here is one of my image queries:
almaOne: file(relativePath: { eq: "almaOne.jpg" }) {
childImageSharp {
fluid(maxWidth: 2000) {
...GatsbyImageSharpFluid
}
}
}and the entire query with three images and some markdown info:
export const query = graphql`
query {
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
fields {
slug
}
excerpt
}
}
}
almaOne: file(relativePath: { eq: "almaOne.jpg" }) {
childImageSharp {
fluid(maxWidth: 2000) {
...GatsbyImageSharpFluid
}
}
}
almaTwo: file(relativePath: { eq: "almaTwo.jpg" }) {
childImageSharp {
fluid(maxWidth: 2000) {
...GatsbyImageSharpFluid
}
}
}
almaThree: file(relativePath: { eq: "almaThree.jpg" }) {
childImageSharp {
fluid(maxWidth: 2000) {
...GatsbyImageSharpFluid
}
}
}
}
`According to the tutorials I've read this is all correct, but if you see anything I'm doing wrong, please let me know.
ghost
commented
5 years ago I don't know if it can help. I ran into the same issue, with the exact same error log. Running a graphiql query on allImageSharp prompted a message complaining about the size of some images that were smaller than the maxWidth value I put in the query.( e.g. fluid(maxWidth: 2000)).
After filtering my images in the static folder fixing the minimal width on the maxWidth value, it fixed the issue.
rchrdnsh
commented
5 years ago thank you for your reply @raphadeluca. I dbl checked my images and they are all wider than 2000px, but this is good to know for the future anyway :-)
rchrdnsh
commented
5 years ago yeah, happened again...
I assume that if I rename the files again then they will work again for a while then will break again...
argh...
rchrdnsh
commented
5 years ago Sorry @KyleAMathews, don't mean to @ you for no reason, just don't know who to ask and it's been a few days. Maybe you might know who I can point this to that works on gatsby-image?
kakadiadarpan
commented
5 years ago @rchrdnsh can you provide a reproduction repo for this?
rchrdnsh
commented
5 years ago I'm going to try and come at this from a different perspective by building a new site with the default starter and see if I run into an issue that way. Will close for now, but may re-open if I figure out what's up or run into the same issue.
thundernixon
commented
5 years ago I had the same (or a very similar) issue, using gatsby-mdx and a featured image in a page's markdown file.
TL;DR: I solved it by reinstalling my dependencies with rm -rf node_modules, then yarn
The page's .mdx file includes the frontmatter:
---
featuredImage: assets/templates_tweak_3000x1800-1-resized.png
---It's probably worth mentioning that the folder structure is like this:
src
📂layouts
📝 project.js // (this is the template)
📂 projects
📂 projectName
📂 assets
⬇️ projectName.mdThe template's graphQL full query is:
export const pageQuery = graphql`
query ProjectQuery($id: String) {
mdx(id: { eq: $id }) {
id
frontmatter {
project
description
designer
bio
links
featuredImage {
childImageSharp {
fluid(maxWidth: 980) {
...GatsbyImageSharpFluid
}
}
}
}
code {
body
}
}
}
`I was getting this error when I ran gatsby develop and viewed it in my browser:
×
TypeError: Cannot read property 'childImageSharp' of null
ProjectPage
src/layouts/project.js:160
157 | <Img
158 | title="Project header image"
159 | alt={mdx.frontmatter.project}
> 160 | fluid={mdx.frontmatter.featuredImage.childImageSharp.fluid}
161 | />
162 | </Hero>
163 | <MainCol>This confused me for quite awhile, made me internally debate my worth as a human, then ponder other frameworks, go have a snack, and Google again and again until I came across a Spectrum chat thread from @rchrdnsh who mentioned that things worked when he restarted from scratch. So, I tried to delete and reinstall my dependencies, and ... sure enough, it's working again. ¯\_(ツ)_\/¯
mediamaker
commented
5 years ago Yup, nuking the cache and node modules fixed this for me as well. Would be nice to nail down the underlying cause.
ramthenmala
commented
5 years ago still im facing the issue. it worsen my day
is there any alternative way to fix this?
adithwip
commented
5 years ago Hello,
I might be come with a solutions. I get that the example code from the author is from some tutorials i've encountered as well 🤔
But here's may be the fix:
export const query = graphql`
query {
fileName: file(relativePath: { eq: "images/myimage.jpg" }) {
childImageSharp {
fluid(maxWidth: 400, maxHeight: 250) {
...GatsbyImageSharpFluid
}
}
}
}
`Notice in the { eq: "images/myimage.jpg"}) { Once i put prefix path to the image file, my day is start to feel exciting again
zeekrey
commented
4 years ago I'm facing the issue as well. The funny thing is, that during development everthing looks good - no errors, everthings looks as it should. But once I run gatsby build und try to serve/deploy ist it says:
TypeError: Cannot read property 'childImageSharp' of undefined
You can see it here: https://dev.eisberg.io/. Since the problem only appears after build I don't know how to debug it. :(
PS: I tried gatsby clean and reinstallinging all dependencies almost 1000 times.
adonig
commented
4 years ago Just came here to say, that my project currently suffers from the same problem. I tried gatsby clean && rm -rf node_modules && npm install but sadly it did not help. I checked out gatsby/examples/recipes-gatsby-image and that example works nicely. I upgraded all dependencies using ncu -u && npm install and the example still works. Now I try finding out what my project does differently. I'm using gatsby-plugin-typescript and some other plugins that might cause trouble. I will let you know if I find a solution.
adonig
commented
4 years ago I played around with the interactive GraphiQL environment and found out, that childImageSharp is not null, when I remove the images/ prefix. So in my case this works:
query {
hero: file(relativePath: { eq: "hero.png" }) {
childImageSharp {
fluid(maxWidth: 1080, maxHeight: 400) {
...GatsbyImageSharpFluid
}
}
}
}I'm not sure why, because I specify the prefix in gatsby-config.js:
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `static`),
},
},I couldn't find our what the actual problem is, but I could find a connection: I used this package https://github.com/birkir/gatsby-source-prismic-graphql and had GraphQL Issues. I solved the specific problem by using a yarn resolutions tag in my package.json ("resolutions": {"gatsby-source-graphql": "2.1.24"}). I now removed the package and it works fine again. :(
rtluu
commented
4 years ago Has anyone found a solution to this? When I run my build locally, everything works perfectly, but when I deploy my build to gh-pages it only loads the lowest resolution, barely visible images.
Here are my gatsby-config.js plugins:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `fonts`,
path: `${__dirname}/src/fonts`,
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /\.inline\.svg$/
},
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#9DB3C3`,
theme_color: `#9DB3C3`,
display: `minimal-ui`,
icon: `src/images/ebm-icon.png`,
},
},
],I'd appreciate any help and advice!
PieterT2000
commented
4 years ago Still facing the exact same error with gatsby-source-wordpress.
daviddprtma
commented
2 years ago Has anyone had a solution about why my import in gatsby-image couldn't be import successfully and there are a message in my console like this
Description
working on a site...querying images with graphql...and things are breaking oddly...
So, I set up my image route in the
gatsby-config.jsfile, like so:...then I create my query for my image, like so:
and then when I run
gatsby developin the terminal I get the following series of errors:but the app works with the images...at least...for one or two
gatsby developcycles, but after a little bit, I end up getting this series of error messages in the console:...and the site fails to work properly. There are no errors in the terminal, but only in the console, and the screen is completely blank. I can manually type in the URL or other pages without images and they load just fine, but the index page, which is where the images are, does not work at all.
I can fix this problem by simply changing the names of my images and their associated variable names in the graphql query, but it then will break again on any subsequent
gatsby developbuilds. This makes me think that it's not my code, but rather another issue that I may not be able to control, but of course, I have no idea, really.Steps to reproduce
I am following all the steps in the tutorial for
gatsby-imageas well as the linked articles about usinggatsby-image, and I've been through my code quite a few times trying to see if I did something wrong, but I think it all looks good to me. I checked to see if all the images are at least 2000px wide, which they are, and I can fix the issue temporally simply by changing the names of the images and their associated variable names, but I get the same series of errors in the terminal and the newly named images only work once before they break again with the same console error messages.Expected result
gatsby-imageshould simply work as expected and not break my app completely.Actual result
30 error messages in the console and the site does not work at all, as far as I can tell, but the site builds in the terminal. So these error messages are only in the browser console.
I really have no idea what is going on, but I'm sort of confident that it is not my code per se, as I am simply following the directions, but please let me know if it is, as I am new to this whole Gatsby thing.
Environment