Populating named slots in a loop gives error: Expected ";" but found ":"

[OscarHagman]

What version of astro are you using?

2.0.2

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

None

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

When populating named slots in a loop it throws an error that isn't very useful. It also points to a row in the code that doesn't exist (points to row 33 when the file only has 13 rows). It works fine when only using one of the named slots, however if you use curly brackets {} in the map function to make it multi-lined it won't display the content (doesn't throw any errors with curly brackets)

Example component:

<section>
  <div class="slot-1-container">
    <slot name="1" />
  </div>
  <div class="slot-2-container">
    <slot name="2" />
  </div>
</section>

And when you import it:

---
import Test from "../components/Test.astro"

const data = [
  { a: "this", b: "is" },
  { a: "a", b: "test" },
]
---

<Test>
  {data.map((d) => <p slot="1">{d.a}</p><p slot="2">{d.b}</p>)}
</Test>

Example with curly brackets:

<Test>
  {data.map((d) => {
    <p slot="1">{d.a}</p>
  })}
</Test>

Link to Minimal Reproducible Example

https://codesandbox.io/p/sandbox/cool-architecture-8hf06e?file=%2Fsrc%2Fpages%2Fwithout-curly-brackets.astro&selection=%5B%7B%22endColumn%22%3A8%2C%22endLineNumber%22%3A12%2C%22startColumn%22%3A8%2C%22startLineNumber%22%3A12%7D%5D

Participation

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

[MoustaphaDev]

Reopening this as we've reverted the fix made in #963, due to unexpected regressions that it caused.