Babel parser throws syntax erros when JSON fragments are embedded in <code> in the content

[lorenzode]

Run next info (available from version 12.0.8 and up)

No response

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

14.17.6

What browser are you using?

Latest Chrome

What operating system are you using?

Ubuntu 20.04

How are you deploying your application?

Gitlab pages

Describe the Bug

I have example code embedded in <code>tags in my content. This part in my contents makes rendering of that page in NextJs fail:

<code>{ "data": [</code>

error - SyntaxError: unknown: Unexpected token, expected "}" (378:65)

> 378 | for the JSON responses by the Ad Library API: <code>{ "data":  [</code>
      |                                                                  ^
  379 | <br />
  380 | And the footer, which that indicates that the data ends there, looks
  381 | like this: <code>] }</code></note></p>
    at Object._raise (/[PATH]/node_modules/@babel/parser/lib/index.js:541:17)

export const getStaticProps = async (context: any) => {
  const res = await fetch( FETCHING FROM API  )
  const pages = await res.json()
  const response = await redirectOnHttpError(pages)
  // Return on error
  if ((response as Redirect)?.redirect) return response

  const serializedContents = await serialize(
    // <code>{ "data":  [</code> is inside contents 
    sanitizeHtml((response as Array<APIData>)[0].contents)
  )

  return {
    props: {
      page: (response as Array<APIData>)[0],
      serializedContents,
      pageType: 'page'
    }
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch(
    FETCHING FROM API
  )
  const pages: Array<APIData> = await res.json()

  const cRes = await fetch(FETCHING FROM API`)
  const categories = await cRes.json()

  const paths = compact(map(pages, p => {
    const category = find(categories, c => c.uuid === p.category)
    if (!category) return null
    return {
      params: {
        category: category.slug,
        slug: p.slug,
        locale: p.locale
      }
    }
  }))

  return { paths, fallback: false }
}

Expected Behavior

Babel should ignore the JSON fragments in the <code>blocks in serializedContents.

Other pages without JSON example in the content are rendering fine.

To Reproduce

This happens both on next start and next build && next export.

[timneutkens]

Assigned it to SWC transforms to verify this case in SWC. If you want to change Babel parsing please report an issue on the Babel repository 🙏

[lorenzode]

I think the issue lies with using next-mdx-remote. Closing...

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.