Gatsby: Gatsby-image fails in build in this repo, solved when removing a specific styled component

[kuworking]

If you clone this repo and do

1. yarn
2. yarn workspace site develop

everything works as expected, but if you

1. yarn workspace site build
2. yarn workspace site serve

you should notice that the images of the 2 posts in localhost/9000 are not shown. If you inspect it, the <picture> tag is missing.

The problem is located here and here

Somehow, gatsby doesn't like if you style GIcon here (which itself is styling a span). It is weird (because it seems completely unrelated). If you change this

with

const Icon = ({ g_building }) => <GIcon g_building={g_building} />

const Icon2 = styled(GIcon)`
  font-size: 5em;
  display: flex;
  & svg {
    color: #c89999c9;
  }
`

it doesn't make any change, but if you delete Icon2 and just add this

const Icon = ({ g_building }) => <GIcon g_building={g_building} />

/*
const Icon2 = styled(GIcon)`
  font-size: 5em;
  display: flex;
  & svg {
    color: #c89999c9;
  }
`
*/

then the build (after deleting public and cache, just in case) works as expected.

I say this is a bug but I have no idea. However, it looks like a bug to me, this shouldn't happen IMHO

[pieh]

Hey, I tried reproducing and what I got when building and serving is runtime error:

Uncaught Error: An error occurred. See https://github.com/styled-components/styled-components/blob/master/src/utils/errors.md#1 for more information. Additional arguments: undefined

Investigating why this is happening

And definitely can confirm that omitting extra styling of GIcon "fixes" it in production.

[pieh]

This is very weird ... it seems like there is something weird that webpack is doing in production mode

When I add:

import { GIcon } from 'gatsby-theme-inici'
+import * as ThemeExports from 'gatsby-theme-inici'
+console.log(ThemeExports)

It reports empty module in production mode (but only if GIcon is being styled):

And this is output is either GIcon is not being styled or if I set webpack mode to development:

[kuworking]

I'm not in front of a computer now, but with yarn workspace gatsby-theme-u build and serve it works so it may be related to gatsby themes?

[pieh]

That's possible it's related in some way - but I have no idea why it wouldn't happen when you comment out that extra styling on GIcon?

[kuworking]

Yes, your screenshots are the same as mine, and yes, it is weird because this is styling a GIcon in a page that is rendered when gatsby-images is not acting, or the contrary, when gatsby-image fails, the styling of GIcon is not occurring since type != 'mdx' but == grid (seen here).

They are really unrelated. And the fact that this interference is not occurring when the structure is core-child but occurring with core-child-child (even though the problem is always occurring in the first child) suggests that gatsby-themes is involved, but maybe not.

If I'm not wrong, this is the only place where GIcon gets styled, so maybe there's something wrong with GIcon? Gonna experiment a little bit here

[kuworking]

Definitively is weird, because replacing GIcon's content with a simple

import React from 'react'
export const GIcon = props => 'hey'

doesn't make any difference, so it's not about GIcon, it's about styling an element of the core from the child, .... but, the site has several stylings like this, so what's happening? And, why is this happening when a 2nd child comes into play? Because here the 2nd child is not doing anything here, it's not participating here.

Maybe it is about having in the 2nd child

    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: path.resolve(__dirname, `posts`),
      },
    },

that somehow interferes with the subfolders? I've been playing with this in all possible variations (and also with the images) but nothing has made any difference in the behaviour. I'm afraind I'm running out of ideas 🤒

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[amicidellaschola]

Hi, I am struggling against this problem too. On develop all images show up correctly, while on build the <picture>... HTML element is not printed,
This shoulbe the correct usual output

instead I get this

I have no clue about what is causing it. I am trying to figure out what change I made could have caused it but it's hard to isolate the problem as it is quite a complex gatsby project. I am writing here in case anybody stumble upon this problem and I'll post, hopefully, the solution that will work for me

[tomhanlon]

@amicidellaschola Hi, I am encountering the same issue -- did you find a solution?

[pascaloliv]

@amicidellaschola @tomhanlon I'm experiencing the same issue at the moment on my 404 page on when using gatsby develop the image is displaying properly (<picture> and <noscript> elements).

But when I'm building the app, there is no <picture> element.

Did you find any cause or solution?
Thx

[tomhanlon]

@pascaloliv The project I was working on was hosted on Netlify. I found once I cleared the cache and re-deployed the images rendered properly. Can you try that?