mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
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
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:
- Run
pnpm next dev test/development/app-dir/source-mapping. - Go to http://localhost:3000.
- Open the Console panel of the Chrome DevTools.
- Look at the component stack of the replayed console warning. It should contain the server source filenames.
- 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:
- Run
pnpm next dev test/development/app-dir/source-mapping. - Go to http://localhost:3000 or http://localhost:3000/client.
- Open the Components panel of the React DevTools.
- Select the
Formelement. - In the props section, right-click on the
actionprop and select "Go to definition" (sometimes it needs two tries). - You should end up in the Chrome DevTools Sources panel with the
actions.tsfile open and the cursor either atfoo()(for/), orbar()(for/client).