Only import dev overlay for dev mode (#41771)

* Import dev overlay for dev mode only
* Remove other unused code

<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/build/entries.ts

@@ -521,7 +521,7 @@ export function finalizeEntrypoint({
     name !== CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH
   ) {
     // TODO-APP: this is a temporary fix. @shuding is going to change the handling of server components
-    if (hasAppDir && entry.import.includes('flight')) {
+    if (hasAppDir && entry.import.includes('next-flight-client-entry-loader')) {
       return {
         dependOn: CLIENT_STATIC_FILES_RUNTIME_MAIN_APP,
         ...entry,

packages/next/build/webpack-config.ts

@@ -1618,7 +1618,7 @@ export default async function getBaseWebpackConfig(
     },
     module: {
       rules: [
-        ...(hasAppDir && !isClient && !isEdgeServer
+        ...(hasAppDir && !isClient
           ? [
               {
                 issuerLayer: WEBPACK_LAYERS.server,
@@ -1643,7 +1643,7 @@ export default async function getBaseWebpackConfig(
                     // If missing the alias override here, the default alias will be used which aliases
                     // react to the direct file path, not the package name. In that case the condition
                     // will be ignored completely.
-                    react: 'next/dist/compiled/react',
+                    react: 'next/dist/compiled/react/react.shared-subset',
                     'react-dom$':
                       'next/dist/compiled/react-dom/server-rendering-stub',
                   },

packages/next/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -231,7 +231,7 @@ export class FlightClientEntryPlugin {
 
       function collectModule(entryName: string, mod: any) {
         const resource = mod.resource
-        const modId = resource // compilation.chunkGraph.getModuleId(mod) + ''
+        const modId = resource
         if (modId) {
           if (regexCSS.test(modId)) {
             cssImportsForChunk[entryName].push(modId)
@@ -361,9 +361,8 @@ export class FlightClientEntryPlugin {
         !rawRequest.startsWith(APP_DIR_ALIAS)
 
       const modRequest: string | undefined = isLocal
-        ? rawRequest // compilation.chunkGraph.getModuleId(mod) + ''
+        ? rawRequest
         : mod.resourceResolveData?.path + mod.resourceResolveData?.query
-      // console.log('modId:after', modRequest)
 
       // Ensure module is not walked again if it's already been visited
       if (!visitedBySegment[layoutOrPageRequest]) {

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -186,10 +186,8 @@ export class FlightManifestPlugin {
           context,
           mod.resourceResolveData?.path || resource
         )
-        // if (resource.includes('script'))
-        //   console.log('ssrNamedModuleId', ssrNamedModuleId, modId)
+
         if (!ssrNamedModuleId.startsWith('.'))
-          // TODO use getModuleId instead
           ssrNamedModuleId = `./${ssrNamedModuleId.replace(/\\/g, '/')}`
 
         if (isCSSModule) {

packages/next/client/app-index.tsx

@@ -7,7 +7,6 @@ import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-we
 
 import measureWebVitals from './performance-relayer'
 import { HeadManagerContext } from '../shared/lib/head-manager-context'
-import HotReload from './components/react-dev-overlay/hot-reloader-client'
 import { GlobalLayoutRouterContext } from '../shared/lib/app-router-context'
 
 /// <reference types="react-dom/experimental" />
@@ -178,6 +177,9 @@ export function hydrate() {
   if (process.env.NODE_ENV !== 'production') {
     const rootLayoutMissingTagsError = (self as any)
       .__next_root_layout_missing_tags_error
+    const HotReload: typeof import('./components/react-dev-overlay/hot-reloader-client').default =
+      require('./components/react-dev-overlay/hot-reloader-client')
+        .default as typeof import('./components/react-dev-overlay/hot-reloader-client').default
 
     // Don't try to hydrate if root layout is missing required tags, render error instead
     if (rootLayoutMissingTagsError) {

test/.stats-app/app/app-edge-ssr/page.js

@@ -2,6 +2,4 @@ export default function page() {
   return 'edge-ssr'
 }
 
-export const config = {
-  runtime: 'experimental-edge',
-}
+export const runtime = 'experimental-edge'

test/.stats-app/next.config.js

@@ -3,3 +3,11 @@ module.exports = {
     appDir: true,
   },
 }
+
+// For development: analyze the bundled chunks for stats app
+if (process.env.ANALYZE) {
+  const withBundleAnalyzer = require('@next/bundle-analyzer')({
+    enabled: true,
+  })
+  module.exports = withBundleAnalyzer(module.exports)
+}

test/e2e/app-dir/back-button-download-bug/app/page.js

@@ -4,8 +4,8 @@ export default function Home() {
   return (
     <>
       <h1 id="home-page">Home!</h1>
-      <Link href="/post/1">
-        <a id="to-post-1">To post 1</a>
+      <Link href="/post/1" id="to-post-1">
+        To post 1
       </Link>
       <Link href="/">To /</Link>
     </>

test/e2e/app-dir/root-layout/app/(mpa-navigation)/dynamic-catchall/[...slug]/page.js

@@ -4,11 +4,11 @@ export default function Page({ params }) {
   const nextUrl = [...params.slug, 'slug']
   return (
     <>
-      <Link href={`/dynamic-catchall/${nextUrl.join('/')}`}>
-        <a id="to-next-url">To next url</a>
+      <Link id="to-next-url" href={`/dynamic-catchall/${nextUrl.join('/')}`}>
+        To next url
       </Link>
-      <Link href="/dynamic/first">
-        <a id="to-dynamic-first">To next url</a>
+      <Link href="/dynamic/first" id="to-dynamic-first">
+        To next url
       </Link>
       <p id={`catchall-${params.slug.join('-')}`}>
         catchall {params.slug.join(' ')}