Broken error on improperly nested <li> tag

[Ducklett]

What version of astro are you using?

2.8.5

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Chrome

Describe the Bug

I was trying to create a nested header layout when I ran into a vague Unexpected "}" error. Turns out the compiler freaks out when you improperly nest a <li> tag for whatever reason.

Note how in the example below I wrapped the nested <li> in a <div>, it works fine when I replace <div> with <ul>.

Repro:

---
const routes = [
  { path: "/", name: "Home" },
  {
    path: "/projects",
    name: "Projects",
    items: [ 'a', 'b', 'c' ],
  },
];
---

<ul>
	{routes.map(route => (<li>
		{route.name}
		<div>{route.items && route.items.map(item => (<li>{item}</li>) )}</div>
	</li>))}
</ul>

The error and stack trace:

Unexpected "}"

Error: Transform failed with 1 error:
C:/Users/___/hello-astro/src/components/stock/What.astro:38:49: ERROR: Unexpected "}"
    at failureErrorWithLog (C:\Users\___\hello-astro\node_modules\vite\node_modules\esbuild\lib\main.js:1646:15)
    at C:\Users\____\hello-astro\node_modules\vite\node_modules\esbuild\lib\main.js:847:29
    at responseCallbacks.<computed> (C:\Users\____\hello-astro\node_modules\vite\node_modules\esbuild\lib\main.js:703:9)
    at handleIncomingPacket (C:\Users\____\hello-astro\node_modules\vite\node_modules\esbuild\lib\main.js:762:9)
    at Socket.readFromStdout (C:\Users\____\hello-astro\node_modules\vite\node_modules\esbuild\lib\main.js:679:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

What's the expected result?

If astro cannot handle improperly nested <li> tags I would expect a nice error telling me this, something like Error: <li> cannot be a child of <div>, you must wrap it in <ul> or <ol>.

The current error of Unexpected "}" is completely irrelevant to the actual problem.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wxb26n?file=src%2Fpages%2Findex.astro&on=stackblitz

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

Yes, this is a problem and we need to fix the irrelevant error message.

We are tracking this in our compiler. withastro/compiler#811