[dev-overlay] ensure stripping overlay bundle in prod build (#76976)

### What

While adding a regression test for overlay JS bundle to ensure it's not
gonna existed in client bundles by asserting the source map.
Found that we're also including the indicator reducer from client JS
bundles. This PR ensure we fully strips it out

Author: huozhi

packages/next/src/client/components/use-reducer.ts

@@ -7,7 +7,6 @@ import type {
   ReducerActions,
   ReducerState,
 } from './router-reducer/router-reducer-types'
-import { useSyncDevRenderIndicator } from './react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator'
 
 export function useUnwrapState(state: ReducerState): AppRouterState {
   // reducer actions can be async, so sometimes we need to suspend until the state is resolved
@@ -23,16 +22,31 @@ export function useReducer(
   actionQueue: AppRouterActionQueue
 ): [ReducerState, Dispatch<ReducerActions>] {
   const [state, setState] = React.useState<ReducerState>(actionQueue.state)
-  const syncDevRenderIndicator = useSyncDevRenderIndicator()
+  const actionDispatch = (action: ReducerActions) => {
+    actionQueue.dispatch(action, setState)
+  }
+
+  let syncDevRenderIndicator
+  if (process.env.NODE_ENV !== 'production') {
+    const useSyncDevRenderIndicator =
+      require('./react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator')
+        .useSyncDevRenderIndicator as typeof import('./react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator').useSyncDevRenderIndicator
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    syncDevRenderIndicator = useSyncDevRenderIndicator()
+  }
+
+  const dispatchCallback =
+    process.env.NODE_ENV !== 'production'
+      ? (action: ReducerActions) => {
+          syncDevRenderIndicator!(() => actionDispatch(action))
+        }
+      : actionDispatch
 
-  const dispatch = useCallback(
-    (action: ReducerActions) => {
-      syncDevRenderIndicator(() => {
-        actionQueue.dispatch(action, setState)
-      })
-    },
-    [actionQueue, syncDevRenderIndicator]
-  )
+  const dispatch = useCallback(dispatchCallback, [
+    actionQueue,
+    dispatchCallback,
+    syncDevRenderIndicator,
+  ])
 
   return [state, dispatch]
 }

test/production/app-dir/browser-chunks/browser-chunks.test.ts

@@ -3,37 +3,57 @@ import { nextTestSetup } from 'e2e-utils'
 import { SourceMapPayload } from 'module'
 
 describe('browser-chunks', () => {
-  const { next, isTurbopack } = nextTestSetup({
+  const { next } = nextTestSetup({
     files: __dirname,
     skipDeployment: true,
   })
 
-  ;(isTurbopack ? it.skip : it)(
-    'must not bundle any server modules into browser chunks',
-    async () => {
-      const sourcemaps = await next.readFiles(
-        '.next/static/chunks',
-        (filename) => filename.endsWith('.js.map')
-      )
+  let sources = []
+  beforeAll(async () => {
+    const sourcemaps = await next.readFiles('.next/static/chunks', (filename) =>
+      filename.endsWith('.js.map')
+    )
+
+    sources = sourcemaps.flatMap(
+      (sourcemap) => (JSON.parse(sourcemap) as SourceMapPayload).sources
+    )
+  })
+  it('must not bundle any server modules into browser chunks', () => {
+    const serverSources = sources.filter(
+      (source) =>
+        /webpack:\/\/_N_E\/(\.\.\/)*src\/server\//.test(source) ||
+        source.includes('next/dist/esm/server') ||
+        source.includes('next/dist/server')
+    )
 
-      const sources = sourcemaps.flatMap(
-        (sourcemap) => (JSON.parse(sourcemap) as SourceMapPayload).sources
+    if (serverSources.length > 0) {
+      console.error(
+        `Found the following server modules:\n  ${serverSources.join('\n  ')}\nIf any of these modules are allowed to be included in browser chunks, move them to src/shared or src/client.`
       )
 
-      const serverSources = sources.filter(
-        (source) =>
-          /webpack:\/\/_N_E\/(\.\.\/)*src\/server\//.test(source) ||
-          source.includes('next/dist/esm/server') ||
-          source.includes('next/dist/server')
+      throw new Error('Did not expect any server modules in browser chunks.')
+    }
+  })
+
+  it('must not bundle any dev overlay into browser chunks', () => {
+    const devOverlaySources = sources.filter((source) => {
+      return (
+        /webpack:\/\/_N_E\/(\.\.\/)*src\/client\/components\/react-dev-overlay\//.test(
+          source
+        ) ||
+        /next\/dist\/(esm\/)?client\/components\/react-dev-overlay/.test(source)
       )
+    })
 
-      if (serverSources.length > 0) {
-        console.error(
-          `Found the following server modules:\n  ${serverSources.join('\n  ')}\nIf any of these modules are allowed to be included in browser chunks, move them to src/shared or src/client.`
-        )
+    if (devOverlaySources.length > 0) {
+      const message = `Found the following dev overlay modules:\n  ${devOverlaySources.join('\n')}`
+      console.error(
+        `${message}\nIf any of these modules are allowed to be included in production chunks, check the import and render conditions.`
+      )
 
-        throw new Error('Did not expect any server modules in browser chunks.')
-      }
+      throw new Error(
+        'Did not expect any dev overlay modules in browser chunks.\n' + message
+      )
     }
-  )
+  })
 })

test/turbopack-build-tests-manifest.json

@@ -18689,6 +18689,16 @@
       "flakey": [],
       "runtimeError": false
     },
+    "test/production/app-dir/browser-chunks/browser-chunks.test.ts": {
+      "passed": [],
+      "failed": [],
+      "pending": [
+        "browser-chunks must not bundle any server modules into browser chunks",
+        "browser-chunks must not bundle any dev overlay into browser chunks"
+      ],
+      "flakey": [],
+      "runtimeError": false
+    },
     "test/production/typescript-basic/typechecking.test.ts": {
       "passed": ["typechecking should typecheck"],
       "failed": [],