What version of astro are you using?

1.6.7

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

None

What package manager are you using?

npm, yarn

What operating system are you using?

Mac

Describe the Bug

In the linked example, I have an astro component where I'm trying to create a <ul> list in JSX by mapping over an array. I want to choose a section of the array using slice, and need to calculate the arguments using division.

The weird thing is: using a single division in the slice call results in a syntax error. The error is not highlighted in VS code, and the line/column given by Astro does not correspond to any line in the source astro component, so I don't know where exactly the issue is.

Also interesting: if you add another division in the slice call, the syntax error goes away. And if I use a division in an index operation instead of inside of a slice call, there is no syntax error. There's also no error if I use subtraction in the slice call. The behavior is very strange, and smells like an issue with string manipulation of source somewhere. Examples below:

<!-- These work fine: -->
<ul>{pokemon.slice(0,8).map(p => <li>{p.name}</li>)}</ul>
<ul>{pokemon.slice(0/1,8/2).map(p => <li>{p.name}</li>)}</ul><ul>{pokemon.slice(0,8-2).map(p => <li>{p.name}</li>)}</ul>
<ul>{pokemon[4/2].name}</ul>

<!-- These break: -->
<ul>{pokemon.slice(0/1,8).map(p => <li>{p.name}</li>)}</ul>
<ul>{pokemon.slice(0,8/2).map(p => <li>{p.name}</li>)}</ul>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rj2hth?file=src/pages/index.astro

Participation

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