Files
next.js/test/development/app-dir/source-mapping
Hendrik LiebauandGitHub 750d7ea633 Bypass source map dev middleware for client chunks (#72581)
A multi-zone Next.js app might have complex rewrites for its client
assets. For these apps, resolving a source map through the
`/__nextjs_source-map` dev middleware might fail because the asset might
belong to a different app.

Instead of trying to resolve those rewrites (i.e. using `fetch` instead
of `fs`), we can just bypass the source map dev middleware for client
chunks. Because we control how those source maps are generated, we can
safely assume that the `sourceMappingURL` is relative to the filename,
with an added `.map` extension. The browser can just request this file,
and it gets served through the normal dev server, without the need to
route this through the source map dev middleware.

reverts #72258
2024-11-12 11:17:57 +01:00
..

The main purpose of this end-to-end test app is to allow manual testing of server component and server action source mapping in DevTools.

Server Components

To check the source mapping of server components, follow these steps:

  1. Run pnpm next dev test/development/app-dir/source-mapping.
  2. Go to http://localhost:3000.
  3. Open the Console panel of the Chrome DevTools.
  4. Look at the component stack of the replayed console warning. It should contain the server source filenames.
  5. Clicking on any filename for a component stack frame should open the actual server sources in the DevTools Sources panel.

Server Actions

To check the source mapping of server actions, follow these steps:

  1. Run pnpm next dev test/development/app-dir/source-mapping.
  2. Go to http://localhost:3000 or http://localhost:3000/client.
  3. Open the Components panel of the React DevTools.
  4. Select the Form element.
  5. In the props section, right-click on the action prop and select "Go to definition" (sometimes it needs two tries).
  6. You should end up in the Chrome DevTools Sources panel with the actions.ts file open and the cursor either at foo() (for /), or bar() (for /client).