[Compiler Bug]: React Compiler does not compile a component if it contains a reference to Object.entries within a try block within an async function

[ferrybig]

What kind of issue is this?

• 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/#N4Igzg9grgTgxgUxALhAHQHaYJYFsAOEMALgAQBKCAhnMQDSnClRgIDKxVxCpAvqQDMYEXKTQgY1WuIDcmTAKgZa2CBlIAxIrgDq2YgAsA8gCMAVglobhuAKIZiMbAjAAKJgOcAbACZg+AJSMmKSkcGpgZAZUGD5e7FAmuPqkALykVGAAnsqkrggAbggOQakAfMFYxI5ZlWhkoQJEeeEYkaQA2gDWCFkMBVReUAgAuqQQAqSmFrQAdMWOzm6eCL5gAUHA8sT1rZDxs14QAOauPX2kHE4YpwNDCBtyVbzb-HBccAZ5D3XEL+p8J4hUiSYiwdSuYGhAA8Jig1TUpGIWXwCFS4jhCKwIHGGAAwl5sHAuqlgNFYvE2Ilkn8ylSkvpoQB6THENRlYEBJ7-TAIAAehBIpB8CAEVCgXjIWhgun0xnMlmI1hE9kWLhkIDoIFanmOKBAeEFZGRqMYpAACkNjtgMEZ8MRVG0+IIbKQAOQmKgmVYAWnwVptPskNGIPvCBGw8RgTJ82EibqBGHcwKZTPD+EjXEdAFkICLkGIQIMvOJMPwwFmwCt-JaoNbbfbHesNVqwAYIAB3ACSDgQMAwgzAKDFXlYvCAA

Repro steps

1. Go to https://playground.react.dev/ (make sure to clear your site data before loading this, because it likes to autosave your code, even if it causes the sandbox to crash)
2. Paste the following

import React, { useState } from "react";

function FormWithObjectFromEntries({ fields }) {
  const handleSubmit = async (event) => {
    try {
      for (const [key, value] of Object.entries(fields)) {
        console.log(key, String(value));
      }
    } catch (e) {}
  };

  return (
    <button type="button" onClick={handleSubmit}>
      Submit
    </button>
  );
}

export default FormWithObjectFromEntries;

(Note that this is a minimal reproducible example, I got this issue in a larger codebase)

Expected:

React compiler compiles the component

Actual (in real code base)

React compiler skips this component

Actual (In playground)

The playground crashes

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

babel-plugin-react-compiler@19.1.0-rc.3

[dewanshrawat15]

Hmm, this seemed interesting, I made a few changes and it seems it's specifically breaking if a person uses a for loop reference to Object.entries inside the try catch block. Doesn't matter if it's an async function or not. If you replace the for loop with a forEach iteration, things work fine 🤔

Pretty interesting issue, ngl!

[josephsavona]

I debugged this a bit. The core of the issue is that there's a loop inside try/catch, and this creates an HIR structure that we don't handle yet (hitting the todo in question). Specifically, every instruction inside a try block gets its own basic block, with a maybe-throw terminal. This reflects the fact that almost every instruction in JS can throw, transferring control flow to the catch block.

We also have a notion of "value" blocks, ie basic blocks that will resolve to a value, used for things like logicals, ternaries, and loop initializers. We need to handle the presence of maybe-throw terminals inside value blocks.

[ferrybig]

One thing that is quite bad in this situation is how slow the playground is for these kind of issues.

Once you paste a code that is apparently not supported, it just crashes. And because it autosaves, just doing a reload doesn't get rid of the crash screen.

The only way to get rid of the error screen is to clear the website data, then close all tabs. And wait until the website loads everything from an empty cache.

This made it very hard to me to get a minium verifyable reproduction program.

You have to keep a notepad on your PC, change something, paste it and if it crashes, you are forced to wait 30 to 60 seconds for all the steps needed.

There should really be an error boundary that still allows you to change your code, or the autosaves should be after the code is tested to produce a non crashing output

[josephsavona]

@ferrybig yeah, the compiler had a bug which made it crash on invalid input. That playground bug should be fixed, please let us know if you run into any more issues!

The original issue here is still open, it’s a known todo.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[sbdchd]

Issue still occurs with the playground example posted above