Typescript error message ',' expected.ts(1005)

Question

I keep getting the error message ',' expected.ts(1005) when trying to dynamically render a modal on Typescript. I'm almost certainly missing a closing curly bracket somewhere but cant figure out where.

      `<div class="modalWrap">
      <h2 class="modalHeader">Shop The Look</h2>
      <div class="modalContent">${object.map((el) => 
      `<div class="prodDetails">
        <img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
        <p class="prodName">${el.name}</p>
        <p class="prodPrice">${el.price.value}</p>
        <div class = "selectWrapper">
    <div class="selectNumber">
    <div class="numberWrapper"> 
  ${el.sizeOptions
    .map(
      (option) => `
      <p class="selectSize" >${option.value}</p>`
    )
    .join('')}
    </div>
    </div>
    </div>
    </div>
    </div>
    )}
    </div>`

Any help would be appreciated!

This is almost illegible. That aside, consistent indentation would help you find the issue, and not trying to do too much at once. — Dave Newton, May 12 '22 at 15:07
You can easily identify missing braces if you install 'Rainbow Brackets ' extension in VS Code. Please check this if you have a typescript version problem https://stackoverflow.com/a/46399668/12467484. — shehanpathi, May 12 '22 at 15:08
@shehanpathirathna Except that it's not a missing brace/bracket/paren. The poor formatting hides the issue. — Dave Newton, May 12 '22 at 15:09
Agreed, best to not try to squeeze everything in to a single line of code. Break it down in to smaller pieces. It will be so much easier to maintain/fix/debug. — phuzi, May 12 '22 at 15:27

score 1 · Answer 1 · answered May 12 '22 at 15:07

You didn't close the string literal that was being mapped from object:

const test = `<div class="modalWrap">
<h2 class="modalHeader">Shop The Look</h2>
<div class="modalContent">${object.map(
    (el) =>
        `<div class="prodDetails">
  <img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
  <p class="prodName">${el.name}</p>
  <p class="prodPrice">${el.price.value}</p>
  <div class = "selectWrapper">
<div class="selectNumber">
<div class="numberWrapper"> 
${el.sizeOptions
    .map(
        (option) => `
<p class="selectSize" >${option.value}</p>`
    )
    .join('')}
</div>
</div>
</div>
</div>
</div>`
)}

</div>`;

score 1 · Accepted Answer · answered May 12 '22 at 15:31

Less of an answer than a rant with good intentions.

This code is illegible, and because of that, finding the missing backtick is extremely tedious. Here's how to make it less awful. ^{* Edited for brevity.}

Step 1: Indent. We're not savages.

This step alone is enough to resolve the issue.

`
<div class="modalWrap">
  <h2 class="modalHeader">Shop The Look</h2>
  <div class="modalContent">
    ${object.map(el => `
      <div class="prodDetails">
        <img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
        <p class="prodName">${el.name}</p>
        <p class="prodPrice">${el.price.value}</p>
        <div class = "selectWrapper">
          <div class="selectNumber">
            <div class="numberWrapper"> 
              ${el.sizeOptions.map(option => `
                <p class="selectSize" >${option.value}</p>
              `).join('\n')}
            </div>
          </div>
        </div>
      </div>
    `).join('\n')}
  </div>
</div>
`

Step 2: Don't do so much at once. Let your code breathe.

There are two pseudo-"components" to pull out, both functions to map. This clarifies their intent and reduces the surface area of the mainline code.

The inner one is simple:

const makeOption = opt => `<p class="selectSize">${option.value}</p>`

The outer one is incrementally more complex, but by maintaining indentation, adding some clarifying whitespace, and using the inner "component", it's much cleaner:

const makeProdDetail = el => `
  <div class="prodDetails">
    <img class="prodImg" alt="prodImage" src=${el.primaryImage.url}></img>

    <p class="prodName">${el.name}</p>

    <p class="prodPrice">${el.price.value}</p>

    <div class="selectWrapper">
      <div class="selectNumber">
        <div class="numberWrapper"> 
          ${el.sizeOptions.map(makeOption).join('\n')}
        </div>
      </div>
    </div>
  </div>
`

The smaller the functional chunks are the easier spotting and mitigating mistakes is. It's also easier to modify/update/parameterize/etc.

Step 3: Tie it all together

Now the overall component is wee:

`
<div class="modalWrap">
  <h2 class="modalHeader">Shop The Look</h2>

  <div class="modalContent">
    ${object.map(makeProdDetail).join('\n')}
  </div>
</div>
`

_{All untested, but roughly correct.}

Step 4: Give things meaningful names.

object => products
el => product

This was very useful, thank you. Accept that my code is quite messy and difficult to read so will try it keep the overall component as wee as possible. Still in my infancy as a developer so every day is a school day! — user16732475, May 12 '22 at 15:57
@user16732475 It's definitely a process, both fun and frustrating :thumbs-up: — Dave Newton, May 12 '22 at 15:57

Typescript error message ',' expected.ts(1005)

2 Answers2