[Compiler Bug]: Usage of `in` operator is reported as a syntax error

emmatown commented 4 months ago

What kind of issue is this?

[X] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
[ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin)
[ ] eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
[ ] react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhHCA7MAXABAQ1wF5dgBfAHQwDMoM5sBLTXAZQgFsFsALRjAOYAKAJSkquXI2q4hAcnxypGAmOATJuGN1gqFcjZRVadMPQCMDGMiDJA

Repro steps

Any code with an in is reported as a syntax error

const a = {}
function Something() {
  if ('a' in a) {
    return 'a'
  }
  return 'b'
}

How often does this bug happen?

Every time

What version of React are you using?

0.0.0-experimental-592953e-20240517

josephsavona commented 4 months ago

Just curious, do you have a local repro for this or is it only on the playground? I'm not able to reproduce this locally, so i'm wondering if it's related to the babel version that we're using in the playground.

If you can reproduce locally, what version of babel are you using?

damianstasik commented 4 months ago

@josephsavona seems like upgrading Next.js version in the playground to at least v14.0.0 fixes the issue. On the current version it does not happen in the dev mode, it breaks once it goes through the build pipeline. The error is thrown here: https://github.com/facebook/react/blob/541e3c516d22cd095c4205fdb87328f6532de5fc/compiler/apps/playground/components/Editor/EditorImpl.tsx#L68

I've tested it on a simple page, the full playground unfortunately breaks during the build on Next 14+, here's the current error that is blocking me:

./node_modules/@types/react/index.d.ts
Error:
  × Export assignment cannot be used when targeting ECMAScript modules. Consider using `export default` or another module format instead.
    ╭─[react/compiler/apps/playground/node_modules/@types/react/index.d.ts:60:1]
 60 │ type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
 61 │
 62 │ // eslint-disable-next-line export-just-namespace
 63 │ export = React;
    · ───────────────
 64 │ export as namespace React;
 65 │
 66 │ declare namespace React {
    ╰────

Next 14 received some updates to vendored Babel dependencies, so it could be a reason why the upgrade fixes the original issue.

josephsavona commented 4 months ago

Got it, so it's an issue with the version of Babel vendored in Next. Thanks for investigating!

facebook / react