[devtools] Apply React Compiler to Next.js DevTools source (#82004)

eps1lon · web-flow · commit a49f676c60ed · 2025-07-25T16:50:54.000+02:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -242,6 +242,15 @@
       "rules": {
         "react/jsx-no-undef": "off"
       }
+    },
+    {
+      "files": [
+        "packages/next/src/next-devtools/dev-overlay/**/*.tsx",
+        "packages/next/src/next-devtools/dev-overlay/**/*.ts"
+      ],
+      "rules": {
+        "react-hooks/react-compiler": "error"
+      }
     }
   ],
   "rules": {
diff --git a/package.json b/package.json
@@ -173,7 +173,7 @@
     "eslint-plugin-jsdoc": "48.0.4",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.35.0",
-    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-hooks": "6.0.0-rc.1",
     "eslint-v8": "npm:eslint@^8.57.0",
     "event-stream": "4.0.1",
     "execa": "2.0.3",
diff --git a/packages/next/next-devtools.webpack-config.js b/packages/next/next-devtools.webpack-config.js
@@ -91,6 +91,25 @@ module.exports = ({ dev, ...rest }) => {
           },
           type: 'javascript/auto',
         },
+        {
+          test: /\.(ts|tsx)$/,
+          exclude: [/node_modules/],
+          loader: 'babel-loader',
+          options: {
+            plugins: [
+              [
+                'babel-plugin-react-compiler',
+                /**
+                 * @type {import('babel-plugin-react-compiler').PluginOptions}
+                 */
+                ({}),
+              ],
+              ['@babel/plugin-syntax-typescript', { isTSX: true }],
+            ],
+            sourceMaps: true,
+          },
+          type: 'javascript/auto',
+        },
         {
           test: /\.css$/,
           use: [
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -145,6 +145,7 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-import-attributes": "7.26.0",
     "@babel/plugin-syntax-jsx": "7.25.9",
+    "@babel/plugin-syntax-typescript": "7.25.4",
     "@babel/plugin-transform-class-properties": "7.25.9",
     "@babel/plugin-transform-export-namespace-from": "7.25.9",
     "@babel/plugin-transform-modules-commonjs": "7.26.3",
@@ -234,6 +235,7 @@
     "async-retry": "1.2.3",
     "async-sema": "3.0.0",
     "axe-playwright": "2.0.3",
+    "babel-loader": "10.0.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/resize/resize-provider.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/resize/resize-provider.tsx
@@ -125,6 +125,7 @@ export const ResizeProvider = ({ value, children }: ResizeProviderProps) => {
       value.resizeRef.current.style.width = `${width}px`
       value.resizeRef.current.style.height = `${height}px`
     }
+    // eslint-disable-next-line react-hooks/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx
@@ -310,6 +310,7 @@ export function useDrag(options: UseDragOptions) {
         machine.current = { state: 'drag', pointerId: e.pointerId }
         ref.current?.setPointerCapture(e.pointerId)
         ref.current?.classList.add('dev-tools-grabbing')
+        // eslint-disable-next-line react-hooks/react-compiler -- Bug in react-hooks/react-compiler
         document.body.style.userSelect = 'none'
         document.body.style.webkitUserSelect = 'none'
         options.onDragStart?.()
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/utils.ts b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/utils.ts
@@ -61,6 +61,7 @@ export function useFocusTrap(
       clearTimeout(id)
       rootNode?.removeEventListener('keydown', onTab)
     }
+    // eslint-disable-next-line react-hooks/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active])
 }
@@ -148,8 +149,7 @@ export function useClickOutsideAndEscape(
       ownerDocumentEl?.removeEventListener('mousedown', handleClickOutside)
       ownerDocumentEl?.removeEventListener('keydown', handleKeyDown)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [active, rootRef, triggerRef])
+  }, [active, close, ownerDocument, rootRef, triggerRef])
 }
 
 //////////////////////////////////////////////////////////////////////////////////////
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-call-stack/error-overlay-call-stack.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-call-stack/error-overlay-call-stack.tsx
@@ -36,6 +36,7 @@ export function ErrorOverlayCallStack({
         dialog.removeEventListener('transitionend', onTransitionEnd)
         setIsIgnoreListOpen(false)
       }
+      // eslint-disable-next-line react-hooks/react-compiler -- Bug in react-hooks/react-compiler
       dialog.style.height = `${initialDialogHeight.current}px`
       dialog.addEventListener('transitionend', onTransitionEnd)
     } else {
diff --git a/packages/next/src/next-devtools/dev-overlay/menu/dev-overlay-menu.tsx b/packages/next/src/next-devtools/dev-overlay/menu/dev-overlay-menu.tsx
@@ -141,6 +141,7 @@ export const DevtoolMenu = ({
       menuRef,
       setSelectedIndex,
     })
+    // eslint-disable-next-line react-hooks/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -125,6 +125,7 @@ export const ResizeProvider = ({ value, children }: ResizeProviderProps) => {`
`125`	`125`	value.resizeRef.current.style.width = `${width}px`
`126`	`126`	value.resizeRef.current.style.height = `${height}px`
`127`	`127`	`}`
	`128`	`+ // eslint-disable-next-line react-hooks/react-compiler`
`128`	`129`	`// eslint-disable-next-line react-hooks/exhaustive-deps`
`129`	`130`	`}, [])`
`130`	`131`
Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,7 @@ export function useFocusTrap(`
`61`	`61`	`clearTimeout(id)`
`62`	`62`	`rootNode?.removeEventListener('keydown', onTab)`
`63`	`63`	`}`
	`64`	`+ // eslint-disable-next-line react-hooks/react-compiler`
`64`	`65`	`// eslint-disable-next-line react-hooks/exhaustive-deps`
`65`	`66`	`}, [active])`
`66`	`67`	`}`
`@@ -148,8 +149,7 @@ export function useClickOutsideAndEscape(`
`148`	`149`	`ownerDocumentEl?.removeEventListener('mousedown', handleClickOutside)`
`149`	`150`	`ownerDocumentEl?.removeEventListener('keydown', handleKeyDown)`
`150`	`151`	`}`
`151`		`- // eslint-disable-next-line react-hooks/exhaustive-deps`
`152`		`- }, [active, rootRef, triggerRef])`
	`152`	`+ }, [active, close, ownerDocument, rootRef, triggerRef])`
`153`	`153`	`}`
`154`	`154`
`155`	`155`	`//////////////////////////////////////////////////////////////////////////////////////`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@ export function ErrorOverlayCallStack({`
`36`	`36`	`dialog.removeEventListener('transitionend', onTransitionEnd)`
`37`	`37`	`setIsIgnoreListOpen(false)`
`38`	`38`	`}`
	`39`	`+ // eslint-disable-next-line react-hooks/react-compiler -- Bug in react-hooks/react-compiler`
`39`	`40`	dialog.style.height = `${initialDialogHeight.current}px`
`40`	`41`	`dialog.addEventListener('transitionend', onTransitionEnd)`
`41`	`42`	`} else {`