Content gets rendered twice, outside gatsby root only in production builds

Description

Not too long ago I decided to move my React landing page to Gatsby - now I’ve hit a wall and I have no idea why my content gets rendered twice. Maybe this is expected behavoir, but I can’t find anything relatable in your docs.

I have a React FC that uses another FC that takes in some props - as soon as I add that component to the main page, the rest of the page gets rendered twice. What really bugs me is that the doubled content gets rendered outside the gatsby source root - feel free to have look, I have no idea how to fix it yet.

I get that gatsby uses GraphQL to load external data into a site, but I don’t want to load anything external, I’m just trying to pass some props between react components.

here’s the problematic code, if I remove it from the side everything works as expected

import { List, ListItem, ListItemIcon, ListItemText, makeStyles, Typography } from "@material-ui/core";
import React from "react"
import listItemChecked from "../../images/icons/list-item-checked.svg"
import listItemEmpty from "../../images/icons/list-item-empty.svg"

const useStyles = makeStyles((theme) => ({
    noMargin: {
        margin: 0
    }
}));

const PricingListItem = (text) => {
    let classes = useStyles()

    return (
        <ListItem>
            <ListItemIcon>
                <img alt="checked" src={listItemChecked}></img>
            </ListItemIcon>
            <ListItemText className={classes.noMargin}>
                <Typography component="li" variant="subtitle2">
                    {text}
                </Typography>
            </ListItemText>
        </ListItem>
    )
}

const PricingListItemMissing = (text) => {
    let classes = useStyles()

    return (
        <ListItem>
            <ListItemIcon>
                <img alt="checked" src={listItemEmpty}></img>
            </ListItemIcon>
            <ListItemText className={classes.noMargin}>
                <Typography component="li" variant="subtitle2" color="textSecondary">
                    {text}
                </Typography>
            </ListItemText>
        </ListItem>
    )
}


export const BasicPricingList = () =>{
    return (
        <List dense aria-label="pricing-basic">
        {PricingListItem("Basic influencer search")}
        {PricingListItem("Bookmarks")}
        {PricingListItem("Engagement rate")}
        {PricingListItem("Profile analytics")}
        {PricingListItem("Category filtering")}
        {PricingListItem("Follower filtering")}
        {PricingListItemMissing("Location filtering")}
        {PricingListItemMissing("Language filtering")}
        {PricingListItemMissing("Basic support")}
        {PricingListItemMissing("Report generation & export")}
        {PricingListItemMissing("Follower verification")}
        {PricingListItemMissing("Multiple users")}
        {PricingListItemMissing("24/7 support")}
    </List>
    )
}

Steps to reproduce

Not sure yet, I don’t know why other FC’s are not triggering this behaviour

Expected result

develop and build should result in the same behaviour

Actual result

when I run gatsby develop, everything renders correctly, but on gatsby build I get my components rendered a 2nd time outside the gatsby source root. Also the rest of the UI since the call to React FC is repeated too.

Environment

System: OS: macOS 11.0.1 CPU: (8) x64 VirtualApple @ 2.50GHz processor Shell: 5.8 - /bin/zsh Binaries: Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Firefox: 85.0 Safari: 14.0.1 npmPackages: gatsby: ^2.26.1 => 2.30.2 gatsby-image: ^2.9.0 => 2.9.0 gatsby-plugin-google-analytics: ^2.9.0 => 2.9.0 gatsby-plugin-google-gtag: ^2.7.0 => 2.7.0 gatsby-plugin-manifest: ^2.10.0 => 2.10.0 gatsby-plugin-material-ui: ^2.1.10 => 2.1.10 gatsby-plugin-netlify-cms: ^4.8.0 => 4.8.0 gatsby-plugin-preact: ^4.5.0 => 4.5.0 gatsby-plugin-sass: ^3.0.0 => 3.0.0 gatsby-plugin-sharp: ^2.12.1 => 2.12.1 gatsby-plugin-sitemap: ^2.10.0 => 2.10.0 gatsby-source-filesystem: ^2.9.0 => 2.9.0 gatsby-theme-material-ui: ^1.0.13 => 1.0.13 gatsby-transformer-sharp: ^2.10.1 => 2.10.1 npmGlobalPackages: gatsby-cli: 2.18.0

[lmyslinski]

I’ve solved it. It’s really annoying dumb bug:

        <ListItem>
            <ListItemIcon>
                <img alt="checked" src={listItemChecked}></img>
            </ListItemIcon>
            <ListItemText className={classes.noMargin}>
                <Typography component="li" variant="subtitle2">
                    {text}
                </Typography>
            </ListItemText>
        </ListItem>

After some fiddling I finally got the console to report an error - I was rendering a <li> component under another <li> component. This (I don’t really know why) results in DOM getting rendered twice, but once I removed that everything works fine

[fullstacksk]

const StyledIconButton = styled(IconButton) width:56px; height:56px;;

This was my mistake. I was trying to style MUi IconButton Component.