reactjs - "Gatsby build" orders jsx improperly, but gatsby develop doesn't

Question

An <a> tag with a <div> inside is generated with the entire <a> tag (including closing tag) before the <div> that is supposed to be inside it. When running "gatsby develop" this never happens and before today "gatsby build" didn't have this issue either.

For reference:

<a href={props.link} target="_blank" rel="noreferrer" className={"tile is-child" + (isolated ? " is-3" : "")}>
            <div className="card m-3 is-clickable is-link">
                <div className="card-image">
                    <InfoOverlay name={props.status} color={props.statusColor ? props.statusColor : "light"} overlayLink={props.overlayLink} />
                    <figure className="image is-2by1">
                        <img src={props.image} alt={props.name + " Image"} style={{ objectFit: "cover" }} />
                    </figure>
                </div>
                <div className="card-content">
                    <div className="media">
                        <Icon props={props} />
                        <div className="media-content">
                            <div className={"title" + (props.tSize !== "undefined" ? " is-" + props.tSize : " is-3")} style={{ paddingTop: sizeDict[tSize][0], paddingBottom: sizeDict[tSize][1] }}>{props.name}</div>
                        </div>
                    </div>
                </div>
            </div>
</a>

I can't seem to find this issue anywhere else, but that could be the case of me not knowing where to look (this is my first gatsby project and my first relatively complex react project). If this is too little information, let me know and I can send more. Any help would be appreciated!

question from:https://stackoverflow.com/questions/65622973/gatsby-build-orders-jsx-improperly-but-gatsby-develop-doesnt

Answer 1

All of the contents of <InfoOverlay /> (which I didn't include the code to) are wrapped in a separate <a> tag, causing the renderer to work improperly. This appears to be neither Gatsby nor React breaking, but the browser. Remedy is to remove the link and make it visually appear nested, rather than actually nest them.

This post covers the core of the problem: https://stackoverflow.com/a/9883044/9214204