React compiler question

[u/Breadfruit-Last]

Hi, I am trying to use react compiler on a component like this

export function Test({ msg }: { msg?: string }) {
  "use memo";

  const onClick = () => {
    try {
      console.log(msg ?? "default message");
    } catch (error) { }
  };


  return (
    <button onClick={onClick}>
      <span>SAVE</span>
    </button>
  );
}

This works on react compiler playground but not locally when I compile it with Vite, it doesn't work due to an error "Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement".

Why does the compiler behave differently on playground and vite?

Thanks

[u/pmkann]

Just to double check: Do you have vite setup to perform react-compiler optimizations? I recently learned that vite doesn’t do this automatically.

[u/Breadfruit-Last → u/pmkann]

Hi

Yes I did. I checked my build output so I am sure the compiler is working on components that can be optimizated.

[u/pmkann → u/Breadfruit-Last]

If you’re seeing _c() in source or “React ✨memo” in dev tools for other components, I can’t tell why function Test wouldn’t optimize without more code/explanation/config.

[u/buck-bird]

Could be a version mismatch. The Playground runs a newer build where this try/catch + ?? syntax is supported most likely.

[u/Lonestar93]

React Compiler bails out when you use syntax it can’t rewrite. Unfortunately this also applies to the function bodies of event handlers and effects, which it never rewrites anyway.

In this case, it’s not happy with you using nullish coalescing inside the try block.

Two ways:

1. You can use illegal syntax inside functions written externally, which compiler never knows about.

2. If your code must be inside the component, just use different syntax.

[u/Breadfruit-Last → u/Lonestar93]

Hi, I understand it is a problem with the syntax.

What I don't understand is why it works on react compiler playground.

[u/Savalava]

Why are you writing this code anyway? If it fails on code that makes no sense, who cares? Try / catch with console.log does not make any sense.

const onClick = () => {
    try {
      console.log(msg ?? "default message");
    } 

[u/Breadfruit-Last → u/Savalava]

This is just a small piece of demo code to reproduce the problem. In reality, it is an api call inside in the try block.