fix: Fix React source locations for Vite 8 compatibility (#24140)

Two changes to fix source location tracking when using Vite 8/Rolldown:

1. Replace @rolldown/plugin-babel with a custom Vite plugin using
   @babel/core directly. The @rolldown/plugin-babel hardcodes
   enforce:'pre', making Babel run before @vitejs/plugin-react (OXC).
   This caused OXC to see Babel-modified code and produce wrong line
   numbers in jsxDEV() source info. The custom plugin uses
   enforce:'post' so Babel runs after OXC.

2. Update addFunctionComponentSourceLocationBabel to read the original
   source file from disk instead of using Babel AST positions. When
   running after OXC, Babel's AST loc values refer to the transformed
   code, not the original. Reading the file directly ensures
   __debugSourceDefine always contains correct original line numbers.

Author: Artur-

flow-build-tools/src/main/resources/plugins/react-function-location-plugin/react-function-location-plugin.js

@@ -1,24 +1,88 @@
 import * as t from '@babel/types';
+import { readFileSync } from 'fs';
 
 export function addFunctionComponentSourceLocationBabel() {
   function isReactFunctionName(name) {
     // A React component function always starts with a Capital letter
     return name && name.match(/^[A-Z].*/);
   }
 
+  // Cache original file contents for finding correct line numbers.
+  // When running after OXC (enforce: 'post'), Babel's AST positions
+  // refer to the transformed code, not the original source. We read
+  // the original file to get correct positions.
+  const originalSources = {};
+
+  function getOriginalLines(filename) {
+    if (!originalSources[filename]) {
+      try {
+        originalSources[filename] = readFileSync(filename, 'utf-8').split('\n');
+      } catch {
+        originalSources[filename] = [];
+      }
+    }
+    return originalSources[filename];
+  }
+
+  function findFunctionLine(filename, functionName) {
+    const lines = getOriginalLines(filename);
+    for (let i = 0; i < lines.length; i++) {
+      // Match "function FunctionName(" or "const/let/var FunctionName ="
+      const funcMatch = lines[i].match(new RegExp(`\\bfunction\\s+${functionName}\\s*\\(`));
+      const constMatch = lines[i].match(new RegExp(`\\b(?:const|let|var)\\s+${functionName}\\s*=`));
+      if (funcMatch) {
+        // Find the opening brace of the function body
+        const braceCol = lines[i].indexOf('{', funcMatch.index + funcMatch[0].length);
+        if (braceCol >= 0) {
+          return { line: i + 1, column: braceCol + 1 };
+        }
+        // Brace might be on a following line
+        for (let j = i + 1; j < lines.length; j++) {
+          const bc = lines[j].indexOf('{');
+          if (bc >= 0) return { line: j + 1, column: bc + 1 };
+        }
+      }
+      if (constMatch) {
+        // Find arrow function body: look for => and then the body start
+        for (let j = i; j < Math.min(i + 5, lines.length); j++) {
+          const arrowIdx = lines[j].indexOf('=>');
+          if (arrowIdx >= 0) {
+            const afterArrow = lines[j].substring(arrowIdx + 2);
+            const trimmed = afterArrow.trim();
+            if (trimmed.length > 0) {
+              // Body starts on same line as =>
+              const bodyStart = arrowIdx + 2 + afterArrow.indexOf(trimmed.charAt(0));
+              return { line: j + 1, column: bodyStart + 1 };
+            }
+            // Body starts on next line
+            if (j + 1 < lines.length) {
+              return { line: j + 2, column: 1 };
+            }
+          }
+        }
+      }
+    }
+    return null;
+  }
+
   /**
    * Writes debug info as Name.__debugSourceDefine={...} after the given statement ("path").
-   * This is used to make the source location of the function (defined by the loc parameter) available in the browser in development mode.
+   * This is used to make the source location of the function available in the browser in development mode.
    * The name __debugSourceDefine is prefixed by __ to mark this is not a public API.
+   *
+   * Uses the original source file to determine correct line numbers,
+   * since Babel may be running on OXC-transformed code with different positions.
    */
-  function addDebugInfo(path, name, filename, loc) {
-    const lineNumber = loc.start.line;
-    const columnNumber = loc.start.column + 1;
+  function addDebugInfo(path, name, filename) {
+    const loc = findFunctionLine(filename, name);
+    if (!loc) {
+      return;
+    }
     const debugSourceMember = t.memberExpression(t.identifier(name), t.identifier('__debugSourceDefine'));
     const debugSourceDefine = t.objectExpression([
       t.objectProperty(t.identifier('fileName'), t.stringLiteral(filename)),
-      t.objectProperty(t.identifier('lineNumber'), t.numericLiteral(lineNumber)),
-      t.objectProperty(t.identifier('columnNumber'), t.numericLiteral(columnNumber))
+      t.objectProperty(t.identifier('lineNumber'), t.numericLiteral(loc.line)),
+      t.objectProperty(t.identifier('columnNumber'), t.numericLiteral(loc.column))
     ]);
     const assignment = t.expressionStatement(t.assignmentExpression('=', debugSourceMember, debugSourceDefine));
     const condition = t.binaryExpression(
@@ -48,15 +112,13 @@ export function addFunctionComponentSourceLocationBabel() {
           }
 
           const filename = state.file.opts.filename;
-          if (declaration?.init?.body?.loc) {
-            addDebugInfo(path, name, filename, declaration.init.body.loc);
-          }
+          addDebugInfo(path, name, filename);
         });
       },
 
       FunctionDeclaration(path, state) {
         // Finds declarations such as
-        // functio Foo() { return <div/>; }
+        // function Foo() { return <div/>; }
         // export function Bar() { return <span>Hello</span>;}
 
         // and writes a Foo.__debugSourceDefine= {..} after it, referring to the start of the function body
@@ -66,9 +128,7 @@ export function addFunctionComponentSourceLocationBabel() {
           return;
         }
         const filename = state.file.opts.filename;
-        if (node.body.loc) {
-          addDebugInfo(path, name, filename, node.body.loc);
-        }
+        addDebugInfo(path, name, filename);
       }
     }
   };

flow-build-tools/src/test/java/com/vaadin/flow/server/frontend/NodeUpdaterTest.java

@@ -170,7 +170,6 @@ void getDefaultDevDependencies_includesAllDependencies_whenUsingVite() {
         expectedDependencies.add("strip-css-comments");
         expectedDependencies.add("@babel/core");
         expectedDependencies.add("@babel/preset-react");
-        expectedDependencies.add("@rolldown/plugin-babel");
         expectedDependencies.add("@types/react");
         expectedDependencies.add("@types/react-dom");
         expectedDependencies.add("@preact/signals-react-transform");

flow-server/src/main/resources/com/vaadin/flow/server/frontend/dependencies/vite/package.json

@@ -16,7 +16,6 @@
     "@rollup/pluginutils": "5.3.0",
     "@babel/core": "7.29.0",
     "@babel/preset-react": "7.28.5",
-    "@rolldown/plugin-babel": "0.2.1",
     "rollup-plugin-visualizer": "7.0.1",
     "rollup-plugin-brotli": "3.1.0",
     "vite-plugin-checker": "0.12.0",

flow-server/src/main/resources/vite.generated.ts

@@ -32,7 +32,7 @@ export { default as useLocalWebComponents } from '#buildFolder#/plugins/vite-plu
 
 import { visualizer } from 'rollup-plugin-visualizer';
 import reactPlugin from '@vitejs/plugin-react';
-import babel from '@rolldown/plugin-babel';
+import { transformSync } from '@babel/core';
 //#tailwindcssVitePluginImport#
 
 //#vitePluginFileSystemRouterImport#
@@ -533,20 +533,33 @@ export const vaadinConfig: UserConfigFn = (env) => {
         include: '**/*.tsx',
         jsxImportSource: productionMode ? 'react' : 'Frontend/generated/jsx-dev-transform',
       }),
-      // Babel plugins for source location info and signals transform
-      // (separate from reactPlugin since v6 uses OXC instead of Babel for JSX)
-      babel({
-        include: '**/*.tsx',
-        plugins: [
-          !productionMode && addFunctionComponentSourceLocationBabel(),
-          [
-            'module:@preact/signals-react-transform',
-            {
-              mode: 'all' // Needed to include translations which do not use something.value
-            }
-          ]
-        ].filter(Boolean)
-      }),
+      // Babel plugins for source location info and signals transform.
+      // Must run AFTER reactPlugin (OXC) so that source locations are correct.
+      // Uses a custom plugin instead of @rolldown/plugin-babel because that
+      // plugin hardcodes enforce:'pre' which cannot be overridden.
+      {
+        name: 'vaadin-babel-post',
+        enforce: 'post' as const,
+        transform(code: string, id: string) {
+          if (!id.endsWith('.tsx')) return null;
+          const result = transformSync(code, {
+            filename: id,
+            plugins: [
+              !productionMode && addFunctionComponentSourceLocationBabel(),
+              [
+                'module:@preact/signals-react-transform',
+                {
+                  mode: 'all' // Needed to include translations which do not use something.value
+                }
+              ]
+            ].filter(Boolean),
+            sourceMaps: true,
+            sourceFileName: id,
+          });
+          if (!result?.code) return null;
+          return { code: result.code, map: result.map };
+        },
+      },
       //#tailwindcssVitePlugin#
       productionMode && vaadinI18n({
         cwd: __dirname,