How to run Lingui macros (or babel plugin) before React Compiler in Next.js 16?

[vnahornyi]

Summary

I’m using Next.js 16 with the new React Compiler but I also use Lingui macros.
Since Lingui needs to be processed before React Compiler, I’m trying to figure out how to make SWC or Babel run the Lingui transformation first — otherwise, React Compiler breaks Lingui macros.

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Wed Sep 17 21:41:39 PDT 2025; root:xnu-12377.1.9~141/RELEASE_ARM64_T8103
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 22.20.0
  npm: 10.9.3
  Yarn: 4.4.0
  pnpm: N/A
Relevant Packages:
  next: 16.0.0
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Example

No response

[dieguezz]

The problem is that Next.js 16's reactCompiler: true flag doesn't currently allow you to control this plugin order, as it manages the compiler internally (and likely runs it first, per the React team's general rule).

To fix this, you must force Next.js to use a custom Babel configuration by removing the reactCompiler: true flag, and creating a .babelrc file. This will use Babel for compilation (which is slower than the default SWC-only path) but gives you the control you need.

Create this .babelrc file in your project's root:

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [
    "@lingui/babel-plugin-lingui-macro", // Must be first
    "babel-plugin-react-compiler"        // Runs after Lingui
  ]
}

This configuration respects Lingui's requirement and should solve the issue where macros are breaking.

Also, you can check docs on how to setup babel.

[vnahornyi]

@dieguezz Unfortunately, this doesn’t work because babel-plugin-react-compiler processes server components, and Next runs with errors like Cannot read properties of undefined (reading 'H') on server components, which makes it impossible to work. A few hours of debugging led me to patch babel-plugin-react-compiler, and now it works.

diff --git a/dist/index.js b/dist/index.js
index ac4a79e741a176252312419e439be74cc80998e5..61c2c7d8cf893441fed4ddfff676ffed7a2ca8ce 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -108409,6 +108409,11 @@ function matchCompilerDiagnostic(badReference, transformErrors) {
 
 // src/Babel/BabelPlugin.ts
 var ENABLE_REACT_COMPILER_TIMINGS = process.env["ENABLE_REACT_COMPILER_TIMINGS"] === "1";
+// Patch: Load Lingui macro plugin
+var linguiMacroPlugin;
+try {
+  linguiMacroPlugin = require('@lingui/babel-plugin-lingui-macro');
+} catch (e) {}
 function BabelPluginReactCompiler(_babel) {
   return {
     name: "react-forget",
@@ -108421,6 +108426,13 @@ function BabelPluginReactCompiler(_babel) {
       Program: {
         enter(prog, pass) {
           var _a, _b, _c, _d;
+          // Patch: Run Lingui transformations first if available
+          if (linguiMacroPlugin && typeof linguiMacroPlugin === 'function') {
+            const lingui = linguiMacroPlugin(_babel);
+            if (lingui.visitor && lingui.visitor.Program && lingui.visitor.Program.enter) {
+              lingui.visitor.Program.enter.call(this, prog, pass);
+            }
+          }
           try {
             const filename = (_a = pass.filename) != null ? _a : "unknown";
             if (ENABLE_REACT_COMPILER_TIMINGS === true) {