React compiler not working

[yanglee2421]

The includes contain .scss, which causes the react compiler (a babel plugin) to not work. Why?

export default defineConfig(() => {
  return {
    plugins: [
      react({
        babel: {
          plugins: [["babel-plugin-react-compiler", {}]],
        },
        include: [".scss"],
      }),
    ],
  };
});

[ArnaudBarre]

Why do you want non JS files to be processed by Babel?

[yanglee2421]

https://github.com/yanglee2421/react-compiler-css-module

Reproduction method

Change red in styles.module.css to green, or change 400 in styles.module.scss to 700.

This seems to be caused by the automatic memoization of the react compiler.

[hi-ogawa]

Thanks for the reproduction. It looks like the issue is not only about css module but it happens for any non-self-accepting hmr change. Simpler version would be https://stackblitz.com/github/hi-ogawa/react-compiler-css-module/tree/chore-minimal-repro?file=src%2Frepro.tsx

// repro.tsx
export default "hello"; // changing this doesn't update App.tsx

// App.tsx
import repro from "./repro";

export default function App() {
  return (
    <p>repro: {repro}</p>
  );
}

I'm not sure if there's something Vite plugin needs to handle for hmr or it's simply a bug on react-compiler side. While fiddling with it, I also found that removing <StrictMode> fixes the issue.

[ArnaudBarre]

Oh WTF this is so bad. I need to investigate

[ArnaudBarre]

React issue: facebook/react#29115