From cf54007077bbf84586e1432bdeb030246666408d Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 24 Oct 2022 18:09:10 -0700 Subject: [PATCH] Only import dev overlay for dev mode import dev overlay on dev --- packages/next/build/entries.ts | 1 - packages/next/build/webpack-config.ts | 4 ++-- .../build/webpack/plugins/flight-client-entry-plugin.ts | 5 ++--- .../next/build/webpack/plugins/flight-manifest-plugin.ts | 4 +--- packages/next/client/app-index.tsx | 3 ++- test/.stats-app/app/app-edge-ssr/page.js | 4 +--- test/.stats-app/next.config.js | 8 ++++++++ 7 files changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts index c43f1d9f8abc479..bcf5ecdccc67d53 100644 --- a/packages/next/build/entries.ts +++ b/packages/next/build/entries.ts @@ -527,7 +527,6 @@ export function finalizeEntrypoint({ ...entry, } } - return { dependOn: name.startsWith('pages/') && name !== 'pages/_app' diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index c4c8c3198ef58fa..6647d7dfa022270 100644 --- a/packages/next/build/webpack-config.ts +++ b/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', }, diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index 41c983490cdcad4..fd8a299dcd14eff 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/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]) { diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts index 81dc53caeaada02..1e63e4a4dece03a 100644 --- a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts +++ b/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) { diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx index 998b71af5bb2320..08ea042108305a7 100644 --- a/packages/next/client/app-index.tsx +++ b/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' /// @@ -176,6 +175,8 @@ function RSCComponent(props: any): JSX.Element { export function hydrate() { if (process.env.NODE_ENV !== 'production') { + const HotReload = require('./components/react-dev-overlay/hot-reloader-client') + typeof import('./components/react-dev-overlay/hot-reloader-client') const rootLayoutMissingTagsError = (self as any) .__next_root_layout_missing_tags_error diff --git a/test/.stats-app/app/app-edge-ssr/page.js b/test/.stats-app/app/app-edge-ssr/page.js index 20e49c40a12cc05..8151cdff9bd9745 100644 --- a/test/.stats-app/app/app-edge-ssr/page.js +++ b/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' diff --git a/test/.stats-app/next.config.js b/test/.stats-app/next.config.js index cfa3ac3d7aa94b3..9544563de649626 100644 --- a/test/.stats-app/next.config.js +++ b/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) +}