Using reactCompilerPreset with logger enabled

[maurer2]

Hello, I had a question about the recommended way to use the logger with the reactCompilerPreset-preset.

Since reactCompilerPreset doesn’t currently expose the logger, it seems that the only option is to add babel-plugin-react-compiler again as a separate plugin.

Is that the recommended approach, or would it be better to skip the reactCompilerPreset entirely and only use the babel-plugin-react-compiler plugin when the loggers is used?

Example config

import { defineConfig } from "vite";
import react, { reactCompilerPreset } from "@vitejs/plugin-react";
import babel from "@rolldown/plugin-babel";
import type { Logger } from "babel-plugin-react-compiler";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    babel({
      presets: [reactCompilerPreset()],
      plugins: [
        [
          "babel-plugin-react-compiler",
          {
            logger: {
              logEvent(filename, event) {
                console.log(filename, event);
              },
            } satisfies Logger,
          },
        ],
      ],
    }),
  ],
});

Cheers

[clyxudev]

Looking at the current reactCompilerPreset implementation, I would not add babel-plugin-react-compiler a second time next to reactCompilerPreset(). The helper already expands to plugins: [['babel-plugin-react-compiler', options]], so adding the plugin again would very likely run the compiler twice.

The tricky part is that the helper currently only accepts compilationMode and target, while it also adds useful Rolldown-specific behavior around filtering, client environments, and optimizeDeps. So for a logger today I think the clean choices are:

1. Skip reactCompilerPreset() and configure babel-plugin-react-compiler directly with logger, if you are okay managing the filtering yourself.
2. Copy the small preset locally and pass the full compiler options object, including logger, while keeping the same rolldown.filter, applyToEnvironmentHook, and optimizeDeps behavior.

So the answer to “should I use both?” is probably no. If you need logger, use one compiler configuration path, not the helper plus a second compiler plugin.

This might also be worth an enhancement request: reactCompilerPreset could accept a wider subset of ReactCompilerBabelPluginOptions and forward options like logger instead of limiting the public options to compilationMode and target.

[ArnaudBarre]

Yes @clyxudev is correct, this was a type issue on our side that just released in 6.0.2

With this version, this should work and be typesafe:

export default defineConfig({
  plugins: [
    react(),
    babel({
      presets: [
        reactCompilerPreset({
          logger: {
            logEvent(filename, event) {
              console.log(filename, event);
            },
          },
        }),
      ],
    }),
  ],
});

[maurer2]

Great! Thanks.