fix: don't use retainLines with react compiler (#319)

Author: ArnaudBarre

.npmrc

@@ -1,4 +1,5 @@
 hoist-pattern[]=@emotion/* # playground/react-emotion
+hoist-pattern[]=*babel*
 strict-peer-dependencies=false
 shell-emulator=true
 auto-install-peers=false

package.json

@@ -31,8 +31,8 @@
     "ci-publish": "tsx scripts/publishCI.ts"
   },
   "devDependencies": {
-    "@eslint-types/typescript-eslint": "^7.5.0",
     "@eslint-types/import": "^2.29.1",
+    "@eslint-types/typescript-eslint": "^7.5.0",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.12.12",
     "@typescript-eslint/eslint-plugin": "^7.9.0",

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## Unreleased
 
+### Fix support for React compiler
+
+Don't set `retainLines: true` when the React compiler is used. This creates whitespace issues and the compiler is modifying the JSX too much to get correct line numbers after that. If you want to use the React compiler and get back correct line numbers for tools like [vite-plugin-react-click-to-component](https://github.com/ArnaudBarre/vite-plugin-react-click-to-component) to work, you should update your config to something like:
+
+```ts
+export default defineConfig(({ command }) => {
+  const babelPlugins = [['babel-plugin-react-compiler', {}]]
+  if (command === 'serve') {
+    babelPlugins.push(['@babel/plugin-transform-react-jsx-development', {}])
+  }
+
+  return {
+    plugins: [react({ babel: { plugins: babelPlugins } })],
+  }
+})
+```
+
 ### Support HMR for class components
 
 This is a long overdue and should fix some issues people had with HMR when migrating from CRA.

packages/plugin-react/src/index.ts

@@ -235,7 +235,11 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         filename: id,
         sourceFileName: filepath,
         // Required for esbuild.jsxDev to provide correct line numbers
-        retainLines: !isProduction && isJSX && opts.jsxRuntime !== 'classic',
+        // This crates issues the react compiler because the re-order is too important
+        // People should use @babel/plugin-transform-react-jsx-development to get back good line numbers
+        retainLines: hasCompiler(plugins)
+          ? false
+          : !isProduction && isJSX && opts.jsxRuntime !== 'classic',
         parserOpts: {
           ...babelOptions.parserOpts,
           sourceType: 'module',
@@ -264,16 +268,23 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     },
   }
 
+  // We can't add `react-dom` because the dependency is `react-dom/client`
+  // for React 18 while it's `react-dom` for React 17. We'd need to detect
+  // what React version the user has installed.
+  const dependencies = ['react', jsxImportDevRuntime, jsxImportRuntime]
+  const staticBabelPlugins =
+    typeof opts.babel === 'object' ? opts.babel?.plugins ?? [] : []
+  if (hasCompiler(staticBabelPlugins)) {
+    dependencies.push('react/compiler-runtime')
+  }
+
   const viteReactRefresh: Plugin = {
     name: 'vite:react-refresh',
     enforce: 'pre',
     config: (userConfig) => ({
       build: silenceUseClientWarning(userConfig),
       optimizeDeps: {
-        // We can't add `react-dom` because the dependency is `react-dom/client`
-        // for React 18 while it's `react-dom` for React 17. We'd need to detect
-        // what React version the user has installed.
-        include: ['react', jsxImportDevRuntime, jsxImportRuntime],
+        include: dependencies,
       },
       resolve: {
         dedupe: ['react', 'react-dom'],
@@ -357,3 +368,11 @@ function createBabelOptions(rawOptions?: BabelOptions) {
 function defined<T>(value: T | undefined): value is T {
   return value !== undefined
 }
+
+function hasCompiler(plugins: ReactBabelOptions['plugins']) {
+  return plugins.some(
+    (p) =>
+      p === 'babel-plugin-react-compiler' ||
+      (Array.isArray(p) && p[0] === 'babel-plugin-react-compiler'),
+  )
+}

playground/compiler/__tests__/compiler.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'vitest'
+import { editFile, isServe, page, untilUpdated } from '~utils'
+
+test('should render', async () => {
+  expect(await page.textContent('button')).toMatch('count is 0')
+  expect(await page.click('button'))
+  expect(await page.textContent('button')).toMatch('count is 1')
+})
+
+test.runIf(isServe)('should hmr', async () => {
+  editFile('src/App.tsx', (code) =>
+    code.replace('count is {count}', 'count is {count}!'),
+  )
+  await untilUpdated(() => page.textContent('button'), 'count is 1!')
+})

playground/compiler/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

playground/compiler/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vitejs/compiler",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0-rc-3f1436cca1-20240516",
+    "react-dom": "^19.0.0-rc-3f1436cca1-20240516"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-react-jsx-development": "^7.22.5",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "workspace:*",
+    "babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
+  }
+}

playground/compiler/public/vite.svg

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

playground/compiler/src/App.css

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import './App.css'
+
+export function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}