From 67e10a7052d735bb7171432d824346f02e4009e1 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sat, 16 Jul 2022 17:07:37 -0500 Subject: [PATCH] Ensure flight manifest is correct with app and pages dir (#38716) This fixes the failing test case on canary in the `app-dir` test suite which is caused by the flight-manifest including references to the `pages/index` chunk and it being attempted to be loaded for a page in `app` which causes a webpack error in development. This also fixes an error from missing `getDerivedStateFromError` in our error boundary in development. ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` x-ref: https://github.com/vercel/next.js/runs/7360713710?check_suite_focus=true x-ref: https://github.com/vercel/next.js/runs/7361755629?check_suite_focus=true x-ref: https://github.com/vercel/next.js/runs/7361755806?check_suite_focus=true --- .../next/build/webpack/plugins/flight-manifest-plugin.ts | 6 ++++++ packages/react-dev-overlay/src/internal/ErrorBoundary.tsx | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts index 50f0fda78e67..4982c6071db1 100644 --- a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts @@ -79,6 +79,12 @@ export class FlightManifestPlugin { id: string | number, mod: any ) { + // if appDir is enabled we shouldn't process chunks from + // the pages dir + if (chunk.name?.startsWith('pages/') && appDir) { + return + } + const isCSSModule = mod.type === 'css/mini-extract' || (mod.loaders && diff --git a/packages/react-dev-overlay/src/internal/ErrorBoundary.tsx b/packages/react-dev-overlay/src/internal/ErrorBoundary.tsx index b2a1a6f0a984..7f836313c510 100644 --- a/packages/react-dev-overlay/src/internal/ErrorBoundary.tsx +++ b/packages/react-dev-overlay/src/internal/ErrorBoundary.tsx @@ -12,6 +12,11 @@ class ErrorBoundary extends React.PureComponent< ErrorBoundaryState > { state = { error: null } + + static getDerivedStateFromError(error: Error) { + return { error } + } + componentDidCatch( error: Error, // Loosely typed because it depends on the React version and was