nextjs - ✅(Solved) Fix Webpack production build includes ~840KB of dev-only Next.js Devtools modules when using certain Browserslist configs [1 pull requests, 5 comments, 4 participants]

Official PRs (…)
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.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#89844Fetched 2026-04-08 00:21:14
View on GitHub
Comments
5
Participants
4
Timeline
8
Reactions
0
Timeline (top)
commented ×5cross-referenced ×1issue_type_added ×1labeled ×1

Fix Action

Fixed

PR fix notes

PR #89244: fix: exclude dev-only modules from production webpack bundles

Description (problem / solution / changelog)

For Contributors

Fixing a bug

  • Related issues linked using fixes #number
  • Tests added
  • Errors have a helpful link attached

What?

Excludes development-only modules (next-devtools/userspace/*, client/dev/*, client/app-link-gc) from production webpack client bundles using NormalModuleReplacementPlugin.

Why?

In production webpack builds, ~860KB of dev-only code is bundled despite being inside process.env.NODE_ENV !== 'production' guards.

Webpack doesn't tree-shake require() calls - modules are added to the dependency graph before dead code elimination runs. This causes significant bundle bloat affecting Core Web Vitals (LCP, FCP), especially on mobile.

This is a regression similar to #68190 which was fixed in #68197, but now affecting the new next-devtools module.

How?

Added a NormalModuleReplacementPlugin in webpack-config.ts that:

  1. Only activates in production client builds (!dev && isClient)
  2. Intercepts module requests matching dev-only paths via regex
  3. Replaces them with private-next-empty-module (already aliased to false)

Modules excluded:

  • next-devtools/userspace/* - devtools UI, error handlers, segment explorer
  • client/dev/* - debug channel, hot reloader, websocket
  • client/app-link-gc - link garbage collection

Test added:

  • test/production/app-dir/devtools-production-exclusion/ - verifies dev-only strings are absent from production client bundles

Fixes #68190 (regression

Changed files

  • packages/next/src/build/webpack-config.ts (modified, +18/-0)
  • test/production/app-dir/devtools-production-exclusion/app/layout.js (added, +7/-0)
  • test/production/app-dir/devtools-production-exclusion/app/page.js (added, +8/-0)
  • test/production/app-dir/devtools-production-exclusion/devtools-production-exclusion.test.ts (added, +69/-0)

Code Example

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32539
  Available CPU cores: 24
Binaries:
  Node: 22.14.0
  npm: 11.6.4
  Yarn: N/A
  pnpm: 10.28.2
Relevant Packages:
  next: 16.2.0-canary.16
  eslint-config-next: N/A
  react: 19.3.0-canary-10680271-20260126
  react-dom: 19.3.0-canary-10680271-20260126
  typescript: 5.9.2
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/AndreiBalan-dev/nextjs-webpack-issue-repro/

To Reproduce

  1. Clone the reproduction repository:

    git clone https://github.com/AndreiBalan-dev/nextjs-webpack-issue-repro.git cd nextjs-webpack-issue-repro

  2. Install dependencies using npm ci:

    npm ci

  3. Build the project using webpack mode:

    npm run build:webpack

  4. Check the production client bundle for dev-only strings:

    grep -o "next-devtools" .next/static/chunks/ed9f2dc4-.js | wc -l grep -o "dev-overlay" .next/static/chunks/ed9f2dc4-.js | wc -l

  5. Observe that ~840–860KB of dev-only modules are present inside the production bundle.

Current vs. Expected behavior

Current Behavior

The production webpack output includes dev-only code such as:

  • next-devtools/userspace/*
  • client/dev/*
  • client/dev-overlay/*
  • client/app-link-gc

Counts inside the affected chunk (ed9f2dc4-*.js):

  • "next-devtools": 27 occurrences
  • "dev-overlay": 29 occurrences
  • "dev-tools-indicator": 16 occurrences

Chunk size: ~840–860KB of dev-only content included in production.

Expected Behavior

These modules should never appear in a production client bundle, regardless of Browserslist, dependency versions, or SWC/Babel transformations.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32539
  Available CPU cores: 24
Binaries:
  Node: 22.14.0
  npm: 11.6.4
  Yarn: N/A
  pnpm: 10.28.2
Relevant Packages:
  next: 16.2.0-canary.16
  eslint-config-next: N/A
  react: 19.3.0-canary-10680271-20260126
  react-dom: 19.3.0-canary-10680271-20260126
  typescript: 5.9.2
Next.js Config:
  output: N/A

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

Webpack

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

next build (local)

Additional context

I haven’t bisected the entire canary history yet, but I can confirm the issue exists on both 16.2.0-canary.16 and 16.2.0-canary.35.
The minimal reproduction consistently reproduces it across all recent canary versions I tested.

I have opened a PR with more information here: #89244

extent analysis

Fix Plan

Fix Name: Exclude Dev-Only Code from Production Bundle

Steps:

  1. Update next.config.js:

module.exports = { // ... other configurations ... experimental: { output: { excludeDevTools: true, }, }, };

2. **Run `npm run build:webpack`** to rebuild the project with the updated configuration.
3. **Verify** that the production client bundle no longer includes dev-only code by running:
   ```bash
grep -o "next-devtools" .next/static/chunks/ed9f2dc4-*.js | wc -l
grep -o "dev-overlay" .next/static/chunks/ed9f2dc4-*.js | wc -l

If the counts are 0, the fix is successful.

Extra Tip:

Make sure to commit the updated next.config.js file and push it to your repository, so the fix is tracked and reproducible.

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?
Loading…

Still need to ship something?

×6

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

Back to top recommendations

TRENDING