Skip to content

[test] Disable CTA from React DevTools #84958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
eps1lon wants to merge 1 commit into from
Closed

[test] Disable CTA from React DevTools #84958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/next/src/client/app-next-dev.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// TODO-APP: hydration warning

import './next-test'
import './app-webpack'

import { renderAppDevOverlay } from 'next/dist/compiled/next-devtools'
Expand Down
1 change: 1 addition & 0 deletions packages/next/src/client/app-next-turbopack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './next-test'
import { appBootstrap } from './app-bootstrap'
import { isRecoverableError } from './react-client-callbacks/on-recoverable-error'

Expand Down
1 change: 1 addition & 0 deletions packages/next/src/client/next-dev-turbopack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// TODO: Remove use of `any` type.
import './next-test'
import { initialize, version, router, emitter } from './'
import initHMR from './dev/hot-middleware-client'

Expand Down
1 change: 1 addition & 0 deletions packages/next/src/client/next-dev.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// TODO: Remove use of `any` type.
import './next-test'
import './webpack'
import { initialize, version, router, emitter } from './'
import initHMR from './dev/hot-middleware-client'
Expand Down
6 changes: 6 additions & 0 deletions packages/next/src/client/next-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// For App and Pages Router
if (process.env.NODE_ENV !== 'production' && process.env.__NEXT_TEST_MODE) {
// Our tests don't run with React DevTools attached so the CTA is noisy.
// See https://github.com/facebook/react/pull/11448
;(window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__ = { isDisabled: true }
}
Comment on lines +2 to +6
Copy link
Contributor

@vercel vercel bot Oct 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The next-test.ts file is created but never imported anywhere, so the React DevTools hook disabling code will never execute. This file needs to be imported in the client entry points to work as intended.

View Details
📝 Patch Details 
diff --git a/packages/next/src/client/app-globals.ts b/packages/next/src/client/app-globals.ts
index 41fa914ddb..01567e42f1 100644
--- a/packages/next/src/client/app-globals.ts
+++ b/packages/next/src/client/app-globals.ts
@@ -1,6 +1,9 @@
 // imports polyfill from `@next/polyfill-module` after build.
 import '../build/polyfills/polyfill-module'
 
+// Disable React DevTools CTA messages in test mode
+import './next-test'
+
 // Only setup devtools in development
 if (process.env.NODE_ENV !== 'production') {
   require('../next-devtools/userspace/app/app-dev-overlay-setup') as typeof import('../next-devtools/userspace/app/app-dev-overlay-setup')
diff --git a/packages/next/src/client/index.tsx b/packages/next/src/client/index.tsx
index e7e44ffbef..7bd77a6e3c 100644
--- a/packages/next/src/client/index.tsx
+++ b/packages/next/src/client/index.tsx
@@ -1,6 +1,9 @@
 /* global location */
 // imports polyfill from `@next/polyfill-module` after build.
 import '../build/polyfills/polyfill-module'
+
+// Disable React DevTools CTA messages in test mode
+import './next-test'
 import type Router from '../shared/lib/router/router'
 import type {
   AppComponent,

Analysis

React DevTools hook not disabled in test mode due to missing imports

What fails: The React DevTools CTA ("Download React DevTools") messages appear in test logs even when __NEXT_TEST_MODE is enabled, because packages/next/src/client/next-test.ts is never imported, so the code that disables the hook never executes.

How to reproduce:

# In a Next.js project with tests running in test mode
__NEXT_TEST_MODE=true npm run test

React DevTools "Download React DevTools" CTA messages will appear in test output/logs.

What happens: The __REACT_DEVTOOLS_GLOBAL_HOOK__ remains undefined (or in its default state), allowing React to initialize DevTools communication and show the CTA message.

Expected: The hook should be set to { isDisabled: true } before React initializes, which prevents React DevTools from showing the CTA. This is required per React PR #11448 - the hook must be set before React code runs so DevTools doesn't attempt to communicate during initialization.

Fix: Import next-test.ts in both client entry points:

  1. packages/next/src/client/app-globals.ts - imported before DevTools setup for app router
  2. packages/next/src/client/index.tsx - imported before React imports for pages router

This ensures the hook is disabled before React initializes on both app and pages routers.

Loading