Rendered HTML is wrong/mangled | Astro Lounge | Page 1

hybrid sentinel Sep 7, 2023, 1:44 AM

#

I have a page that has three tables on it. When the viewport is under a certain size, I display an alternate layout that's more mobile-friendly. This works great for the first section. However, when I include the mobile-friendly markup in the second section of the same page, the outputted HTML is severely mangled.

The snippet below is the code in question. It is copy-pasted from the previous section. When this code is present in the 2nd section, everything after this is totally mangled (emitted incorrectly and outside of the containing tag):

#

<div class="lg:hidden flex flex-wrap flex-row justify-center">
                {maintenance.filters.map(filter => (
                    <MaintenanceCard
                        title={filter.name}
                        partLinks={filter["part-links"] ?? []}
                        notes={filter.notes ?? null}
                    >
                        <div class="text-gray-600 text-sm" slot="content">
                            <ConditionalRender render={(filter["manufacturer-part-number"] ?? "").length > 0}>
                                <div>
                                    <InlineDef title="Manufacturer Part #">
                                        {filter["manufacturer-part-number"] ?? ""}
                                    </InlineDef>
                                </div>
                            </ConditionalRender>
                            {/*
                                I don't know why this is, but when I try to use two custom components (e.g., ConditionalRender) in a row,
                                the Astro compiler throws up. It's not even specific to that component; any custom component does it.
                            */}
                            {(filter["alternative-part-numbers"] ?? []).length > 0
                                ? (
                                    <dt class="inline font-bold">Alt. Part #s</dt>
                                    <dd class="inline ml-1">
                                        <ul class="list-disc">
                                            {filter["alternative-part-numbers"]!.map(altPartNumber => <li class="mx-8">{altPartNumber.text}</li>)}
                                        </ul>
                                    </dd>
                                ) : null}
                        </div>
                    </MaintenanceCard>
                ))}
            </div>

#

Here's a screenshot of the DOM. This is supposed to be a table. Instead, almost all of hte tags are missing and they are emitted outside of the <main> tag. If I delete the <div> posted above, it all renders totally fine.

#

here's a snippet showing the layout in the code editor. totally different from what is emitted. if I delete the first code snippet I posted, everything renders 100% correct. makes zero sense to me.

hybrid sentinel Sep 8, 2023, 8:38 PM

#

Bumping this. It really seems to have something to do with my map function

#

literally just mapping over this array causes it to blow up???

#

???? mapping an empty breaks the page?

hybrid mango Sep 9, 2023, 6:07 AM

#

I'm running into a weird issue where Astro freaks out if a front matter field exists but is null. Maybe that's what's going on with this? Is maintenance.filters defined but empty?

hybrid sentinel Sep 9, 2023, 3:20 PM

#

@hybrid mango I ran into that too but that is unfortunately not what is going on here. replacing maintenance.filters with [] produces the same thing. even replacing the entire block with {[].map(x => null)} causes the same issue

#

I did verify maintenance.filters is not null or undefined and has stuff in it

hybrid mango Sep 9, 2023, 7:46 PM

#

Very weird. Is it because the div is outside the map? Is it something about the resulting empty div that’s messing up the layout?

hybrid sentinel Sep 9, 2023, 9:49 PM

#

@hybrid mango good question. {null} breaks the layout too. but so does this:

<div class="lg:hidden flex flex-wrap flex-row justify-center">
                {<span></span>}
            </div>

#

if the div is truly empty, everything renders fine

hybrid sentinel Sep 9, 2023, 10:23 PM

#

seems like this might just be a bug with tables in the compiler: https://github.com/withastro/compiler/issues/722#issuecomment-1423137820

#

I will just use a different layout type instead

hybrid mango Sep 9, 2023, 10:28 PM

#

Whoa, crazy! Surprised more folks don’t run into this.

hybrid sentinel Sep 9, 2023, 10:38 PM

#

yeah. I was seeing compiler infinite loops when I wrapped my second table in a div so it's gotta be some compiler issues.

#

thanks for taking a look though!

#Rendered HTML is wrong/mangled