Expected ")" but found "}" | Expected ")" but found "$$render"

[javimbk]

What version of astro are you using?

2.10.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?

Mac

What browser are you using?

Chrome, Firefox, Safari

Describe the Bug

I was checking Astro today and I was trying to iterate through a dummy object to display some data in my HTML. This is in a brand new Astro project, in the index.astro:

{
  Object.entries(ALL_DATA.byAcademicYear).map(
    ([academicYear, academicYearSubjects]) => {
      return (
        <p>
          <h2>{academicYear}</h2>
        </p>
      );
    }
  )
}

The object has the following structure:

const ALL_DATA = {
  byAcademicYear: {
    "2016-2017": {
      "Electromagnetismo (95000013)": {
        subject: "Electromagnetismo (95000013)",
        academicYear: "2016-17",
        gradeYear: "2",
        duration: "S",
        credits: "4,5",
        type: "BÁSICA",
        semester: "Feb.",
        grade: "A (5,7)",
      },
    },
  },
};

I started getting the following error
The error message in my local machine:

 error   Expected ")" but found "}"
  File:
    /Users/javier/Dev/sideprojects/teleco-wrapped/src/pages/index.astro:47:68
  Code:
    46 |               </p>
    > 47 |             );
         |                                                                    ^
      48 |           }
      49 |         )
      50 |       }
  Stacktrace:
Error: Transform failed with 1 error:
/Users/javier/Dev/sideprojects/teleco-wrapped/src/pages/index.astro:47:68: ERROR: Expected ")" but found "}"
    at failureErrorWithLog (/Users/javier/Dev/sideprojects/teleco-wrapped/node_modules/vite/node_modules/esbuild/lib/main.js:1649:15)
    at /Users/javier/Dev/sideprojects/teleco-wrapped/node_modules/vite/node_modules/esbuild/lib/main.js:847:29
    at responseCallbacks.<computed> (/Users/javier/Dev/sideprojects/teleco-wrapped/node_modules/vite/node_modules/esbuild/lib/main.js:703:9)
    at handleIncomingPacket (/Users/javier/Dev/sideprojects/teleco-wrapped/node_modules/vite/node_modules/esbuild/lib/main.js:762:9)
    at Socket.readFromStdout (/Users/javier/Dev/sideprojects/teleco-wrapped/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
    at Socket.emit (node:events:513: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)

I discovered that by changing briefly the returned structure in the map I can actually avoid the error, but it really doesn't make sense.

• <p>{academicYear}</p> works ✅
• <h2>{academicYear}</h2> works ✅
• <div><h2>{academicYear}</h2></div> works ✅
• <p><h2>{academicYear}</h2></p> FAILS! 🔴
• <h2><h2>{academicYear}</h2></h2> FAILS! 🔴
• <h2><p>{academicYear}</p></h2> works ✅

I really don't know what to make of this, the error message is clearly misleading. I found this issue and comment that could be related, but this has nothing to do with React: withastro/astro#3575 (comment)

What is also really interesting is that the error slightly changes when I created a minimal reproducible example and change the data structure (or just inlined it):

 error   Expected ")" but found "$$render"
  File:
    /home/projects/github-uxes2a/src/pages/index.astro
  Code:
    63 |             <h2>p+h2 {dummyKey}</h2>
    > 64 |           </p>
         | ^
      65 |         );
      66 |       })
      67 |     }
  Stacktrace:
Error: Transform failed with 1 error:
/home/projects/github-uxes2a/src/pages/index.astro:64:0: ERROR: Expected ")" but found "$$render"
    at failureErrorWithLog (/home/projects/github-uxes2a/node_modules/vite/node_modules/esbuild/lib/main.js:1639:15)
    at eval (/home/projects/github-uxes2a/node_modules/vite/node_modules/esbuild/lib/main.js:837:29)
    at responseCallbacks.<computed> (/home/projects/github-uxes2a/node_modules/vite/node_modules/esbuild/lib/main.js:693:9)
    at handleIncomingPacket (/home/projects/github-uxes2a/node_modules/vite/node_modules/esbuild/lib/main.js:752:9)
    at Socket.readFromStdout (/home/projects/github-uxes2a/node_modules/vite/node_modules/esbuild/lib/main.js:669:7)
    at EventEmitter.emit (node:events:45:8318)
    at addChunk (node:internal/streams/readable:96:3826)
    at readableAddChunk (node:internal/streams/readable:96:3525)
    at Readable.push (node:internal/streams/readable:96:2439)
    at _0x42a48f.onStreamRead (node:internal/stream_base_commons:132:2341)

I am out of ideas, of course I can avoid this, but it is a pity seeing that the DX can be really bad for someone that comes new to Astro and doesn't understand why something that is encouraged in the docs can fail with no good error message. I would love to help fixing it in case I can be of assistance.

Thank you guys!

What's the expected result?

It should either show the right error (pretty sure this is not what is wrong) or it should just work.

Link to Minimal Reproducible Example

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

Participation

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

[matthewp]

I'm betting this is because h2 is not allowed inside of p. The compiler probably "fixes" it and moves the h2 to after, but this winds up creating invalid JS in this situation. Perhaps the compiler should error here when inside of an expression. Moving the issue to the compiler.

[MoustaphaDev]

This was fixed in #897, I added a regression test in #928