nextjs - ✅(Solved) Fix [Turbopack] React DevTools shows "production build" warning in development mode due to extra production renderer [3 pull requests, 4 comments, 4 participants]

Q: Expected behavior

In development mode (`next dev`), only development React renderers should be present. React DevTools should show "This page is using the development build of React" or no warning.

nextjs2026-03-02 04:17:07

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#90744•Fetched 2026-04-08 00:19:36

View on GitHub

Comments

Participants

Timeline

Reactions

Author

Participants

Timeline (top)

commented ×4cross-referenced ×3labeled ×2closed ×1

Fix Action

Fixed

Fixed by PR: fix(turbopack): force development mode for next-devtools bundle to pr… (https://github.com/vercel/next.js/pull/90944)
Fixed by PR: [DevTools] Ignore new production renderers if we already use "worse" versions of React on a page (https://github.com/facebook/react/pull/35994)
Fixed by PR: [DevTools] Ignore new production renderers if we already use "worse" versions of React on a page (https://github.com/greptileai/react-mirror/pull/679)

PR fix notes

PR #90944: fix(turbopack): force development mode for next-devtools bundle to pr…

Repository: vercel/next.js
Author: Ryanakml
State: closed | merged: False
Link: https://github.com/vercel/next.js/pull/90944

Description (problem / solution / changelog)

What?

Forces the next-devtools Webpack bundle to compile in development mode rather than defaulting to production mode.

Why?

When running a Next.js application using next dev --turbo, the React DevTools extension incorrectly displays a "production build" warning.

Upon debugging the injected renderers via window.__REACT_DEVTOOLS_GLOBAL_HOOK?.renderers, it is evident that Turbopack injects 3 renderers. Two are correctly instantiated as development (bundleType: 1), but the third one acts as a rogue production renderer (bundleType: 0).

The network initiator for this rogue renderer is the pre-compiled next-devtools chunk. Previously, packages/next/next-devtools.webpack-config.js set the bundle mode to mode: dev ? 'development' : 'production'. Because the build process defaults this to production, Webpack statically bakes process.env.NODE_ENV = 'production' into the devtools bundle artifact. Consequently, the internal React alias resolves to react-dom.production.js instead of the development version.

How?

Applied a minimal, surgical fix to the Webpack configuration of the next-devtools bundle:

Hardcoded the mode to 'development' in next-devtools.webpack-config.js.
This ensures react-dom.development.js is resolved and NODE_ENV is correctly set for this specific bundle.
The overall bundle size and performance remain unaffected because optimization.minimize: true is still explicitly preserved in the configuration.

Testing

Verified locally using examples/hello-world via node packages/next/dist/bin/next dev examples/hello-world --turbo.
Verified in the browser console that all 3 renderers now return bundleType: 1 and the React DevTools "production" warning has disappeared.

Visual Proof

Before: (The rogue production renderer is injected, triggering the warning) <img width="911" height="239" alt="Screenshot 2026-03-06 at 02 56 12" src="https://github.com/user-attachments/assets/066431dd-828b-49cd-ae65-7b389e14f796" />

After: (All renderers are correctly identified as development) <img width="891" height="238" alt="Screenshot 2026-03-06 at 02 50 57" src="https://github.com/user-attachments/assets/b3c74ceb-7503-404a-af1b-1366f0b1059f" />

Fixes #90744

Changed files

PR #35994: [DevTools] Ignore new production renderers if we already use "worse" versions of React on a page

Repository: facebook/react
Author: eps1lon
State: closed | merged: True
Link: https://github.com/facebook/react/pull/35994

Description (problem / solution / changelog)

Summary

When a new build of React is detected on the screen, React DevTools will display a special icon and extension popup for this build. This helps discover if a page is accidentally using a development build.

However, right now the last seen React build is considered. This can hide if a React development build on the page is used.

Now we keep the seen React builds in state and only change the icon/popup if we see a new, worse React builds. Worse is is just any non-production build.

Originally reported in https://github.com/vercel/next.js/issues/90744

How did you test this change?

Start a Next.js app in dev (e.g. npm run dev next) to ensure the development build icon is used <img width="956" height="374" alt="CleanShot 2026-03-10 at 18 44 40@2x" src="https://github.com/user-attachments/assets/7f4f3529-fd08-48de-bea8-dff4c7c2b6ea" />

Changed files

packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js (modified, +13/-1)
packages/react-devtools-extensions/src/contentScripts/installHook.js (modified, +2/-12)
packages/react-devtools-extensions/src/contentScripts/reactBuildType.js (added, +50/-0)
packages/react-devtools-shared/src/backend/types.js (modified, +7/-0)
packages/react-devtools-shared/src/hook.js (modified, +3/-2)
scripts/flow/react-devtools.js (modified, +14/-0)

PR #679: [DevTools] Ignore new production renderers if we already use "worse" versions of React on a page

Repository: greptileai/react-mirror
Author: everettbu
State: closed | merged: False
Link: https://github.com/greptileai/react-mirror/pull/679

Description (problem / solution / changelog)

Mirror of facebook/react#35994 Original author: eps1lon

Summary

However, right now the last seen React build is considered. This can hide if a React development build on the page is used.

Now we keep the seen React builds in state and only change the icon/popup if we see a new, worse React builds. Worse is is just any non-production build.

Originally reported in https://github.com/vercel/next.js/issues/90744

How did you test this change?

Start a Next.js app in dev (e.g. npm run dev next) to ensure the development build icon is used <img width="956" height="374" alt="CleanShot 2026-03-10 at 18 44 40`@2x`" src="https://github.com/user-attachments/assets/7f4f3529-fd08-48de-bea8-dff4c7c2b6ea" />

Changed files

packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js (modified, +13/-1)
packages/react-devtools-extensions/src/contentScripts/installHook.js (modified, +2/-12)
packages/react-devtools-extensions/src/contentScripts/reactBuildType.js (added, +50/-0)
packages/react-devtools-shared/src/backend/types.js (modified, +7/-0)
packages/react-devtools-shared/src/hook.js (modified, +3/-2)
scripts/flow/react-devtools.js (modified, +14/-0)

Code Example

window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.renderers

---

Map(3) {
  1 => { bundleType: 1, rendererPackageName: "react-dom", ... }           // development
  2 => { bundleType: 1, rendererPackageName: "react-server-dom-turbopack", ... }  // development
  3 => { bundleType: 0, rendererPackageName: "react-dom", ... }           // PRODUCTION
}

---

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 31832
  Available CPU cores: 16
Binaries:
  Node: 24.12.0
  npm: 11.6.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.1.6 // Latest available version is detected (16.1.6).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/sapn1s/create-next-app-16.1.6

To Reproduce

Create a new Next.js 16 app: npx [email protected] test-app --yes
Start dev server: npm run dev
Open http://localhost:3000 in browser with React DevTools extension installed
Click the React DevTools extension icon - observe "This page is using the production build of React" message

Open browser console and run:

window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.renderers

Observe 3 renderers with mixed bundleType values

Current vs. Expected behavior

Current behavior

React DevTools displays "This page is using the production build of React" when running next dev.

Console shows 3 React renderers:

Map(3) {
  1 => { bundleType: 1, rendererPackageName: "react-dom", ... }           // development
  2 => { bundleType: 1, rendererPackageName: "react-server-dom-turbopack", ... }  // development
  3 => { bundleType: 0, rendererPackageName: "react-dom", ... }           // PRODUCTION
}

bundleType: 0 = production, bundleType: 1 = development

DevTools sees the production renderer (#3) and warns the user, even though client components use the development renderer (#1).

Expected behavior

In development mode (next dev), only development React renderers should be present. React DevTools should show "This page is using the development build of React" or no warning.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 31832
  Available CPU cores: 16
Binaries:
  Node: 24.12.0
  npm: 11.6.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.1.6 // Latest available version is detected (16.1.6).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Impact: Cosmetic only. React Profiler and "Record why each component rendered" features work correctly. The warning is misleading but does not affect functionality.

Using latest official extension React Developer Tools - Version 7.0.1 (10/20/2025)

extent analysis

Fix Plan

Update `next.config.js` to use `turbopack` with `dev` mode

// next.config.js
module.exports = {
  // ...
  experimental: {
    turbopack: {
      dev: true,
    },
  },
};

Update `tsconfig.json` to include `module` and `moduleResolution` options

// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "module": "esnext",
    "moduleResolution": "node",
  },
}

Run `npm run build` and `npm run start` to rebuild and restart the dev server

npm run build
npm run start

Verify that the fix worked

Open http://localhost:3000 in browser with React DevTools extension installed
Click the React DevTools extension icon - observe "This page is using the development build of React" message

Open browser console and run:

window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.renderers

Observe only 2 renderers with bundleType value 1 (development)

This fix should resolve the issue by telling Turbopack to use the development build of React in dev mode.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

FAQ

Expected behavior

In development mode (next dev), only development React renderers should be present. React DevTools should show "This page is using the development build of React" or no warning.

#api #ssr #installation #tensor shape #autograd error #training loop #device allocation #model download #tokenizer error #prompt formatting

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

nextjs - ✅(Solved) Fix [Turbopack] React DevTools shows "production build" warning in development mode due to extra production renderer [3 pull requests, 4 comments, 4 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #90944: fix(turbopack): force development mode for next-devtools bundle to pr…

Description (problem / solution / changelog)

What?

Why?

How?

Testing

Visual Proof

Changed files

PR #35994: [DevTools] Ignore new production renderers if we already use "worse" versions of React on a page

Description (problem / solution / changelog)

Summary

How did you test this change?

Changed files

PR #679: [DevTools] Ignore new production renderers if we already use "worse" versions of React on a page

Description (problem / solution / changelog)

Summary

How did you test this change?

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Current behavior

Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

extent analysis

Update next.config.js to use turbopack with dev mode

Update tsconfig.json to include module and moduleResolution options

Run npm run build and npm run start to rebuild and restart the dev server

Verify that the fix worked

FAQ

Expected behavior

Still need to ship something?

RELATED_DISCOVERY

TRENDING

Update `next.config.js` to use `turbopack` with `dev` mode

Update `tsconfig.json` to include `module` and `moduleResolution` options

Run `npm run build` and `npm run start` to rebuild and restart the dev server