JSX Parsing regression 12.2.X -> 12.3.X ("Unexpected token. Did you mean {'>'} or >?")

[broofa]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

$ next info

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:28:23 PDT 2022; root:xnu-8020.141.5~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.14.2
      npm: 8.13.2
      Yarn: 1.18.0
      pnpm: N/A
    Relevant packages:
      next: 12.3.2-canary.0
      eslint-config-next: N/A
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The file below compiles w/out errors on next@12.2.*, but fails with the following errors on next@12.3.1 (and next@canary:

error - ./data/joke.js
Error:
  x Unexpected token. Did you mean `{'>'}` or `>`?
   ,----
 6 | We're stronger <code>&lt;u></code>nited than <code>&lt;div></code>ided.
   :                           ^
   `----

  x Unexpected token. Did you mean `{'>'}` or `&gt;`?
   ,----
 6 | We're stronger <code>&lt;u></code>nited than <code>&lt;div></code>ided.
   :                                                           ^
   `----

  x Unexpected token. Did you mean `{'>'}` or `&gt;`?
    ,----
 19 | Keep the <code>&lt;main></code> thing the <code>&lt;main></code> thing.
    :                        ^
    `----

  x Unexpected token. Did you mean `{'>'}` or `&gt;`?
    ,----
 19 | Keep the <code>&lt;main></code> thing the <code>&lt;main></code> thing.
    :                                                         ^
    `----

---

"joke.js"

const jokes = [
  'Be the developer your linter thinks you are.',
  'There are 10 kinds of people, those who understand binary and those who don’t.',
  'The best caches are like the best hugs. Warm.',
  <>
    We're stronger <code>&lt;u></code>nited than <code>&lt;div></code>ided.
  </>,
  "💕 I'm the CSS to your HTML.",
  'How would you React if I said I love Vue?',
  'Keep friends close and formatters closer.',
  'What did the HTML say to the CSS? I like your style.',
  'Two CSS properties walk into a bar. A barstool in a completely different bar falls over.',
  <>
    If you want to <code>flex</code> your skills and go off the{' '}
    <code>grid</code>, try coding a layout with <code>float</code>.
  </>,
  'The Pen is mightier than the sword.',
  <>
    Keep the <code>&lt;main></code> thing the <code>&lt;main></code> thing.
  </>
];

export function useJoke() {
  return {
    data: jokes[Math.floor(Math.random() * jokes.length)],
    loading: false
  };
}

I.e. This appears to be BREAKING CHANGE of some sort in the JSX parsing logic.

NOTE: In case it's not obvious from the file this error is in, this isn't a critical issue for us. 😆 We have a workaround (escaping both leading and trailing angle-brackets) so this isn't a big deal. I'm just submitting this so you're aware of the issue. I.e. Feel free to close if this isn't worth the trouble to fix.

Expected Behavior

See description

Link to reproduction

See description

To Reproduce

See description

[balazsorban44]

Thanks for reporting.

First, I thought this was a bug introduced in #40520

But in fact, it is the old behavior that is incorrect. See the JSX spec: https://facebook.github.io/jsx/#prod-JSXTextCharacter

So escaping is the solution here.

This ESLint rule should guard against this (included in eslint-config-next):

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.