[Bug] can not resolve source-map on Next.js 15 #161
Comments
|
It seems that the Next.js v15 does not output the Currently, MCR does not support parsing sourcemap from the I'll look into how to get sourcemap from eval, not sure if it will work, but it shoud work if you can downgrad from Nextjs v15 to v14. |
|
Maybe it's also a good idea to support build output from turbopack (next dev --turbo). That way the devtool hack is no longer necessary, since it outputs full source maps by default. Turbopack uses section source maps, so I guess support for section source maps would need to be added if they aren't supported yet. https://nextjs.org/blog/turbopack-for-development-stable#development-builds-that-closely-match-production Edit: 2nd Edit: Looks like clients components just work with turbopack. Only server components and actions don't map to the source properly, and a few too many files are included. This is the server-only output (commented out fixtures, only included global-teardown): Edit 3 (sorry for the spam): More progress. When I include Still server-only: |
|
@nphmuller Thanks for your suggestion, it's good news. Yes, MCR already supports section sourcemap. And the latest Next.js will use turbopack instead of webpack, we should migrate to turbopack if possible. The above issue is not a coverage but a sourcemap issue. I am not an expert in Next.js. If you have more good suggestions or solutions to the issue are welcome, and thanks for your help. |
|
I tried updating the repo to support Nextjs turbopack (branch It works but not perfect. For example, file [MCR] Next.js V8 Coverage Report
┌────────────────────────────────────┬──────────┬────────────┬──────────┬───────────┬──────────┬─────────────────┐
│ Name │ Bytes │ Statements │ Branches │ Functions │ Lines │ Uncovered Lines │
├────────────────────────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
│ localhost-3000/_next/static/chunks │ │ │ │ │ │ │
│ └ _c4c472._.js │ 99.26 % │ 100.00 % │ 75.00 % │ │ 93.75 % │ 1 │
│ src/app │ │ │ │ │ │ │
│ ├ about │ │ │ │ │ │ │
│ │ ├ actions.ts │ 95.11 % │ 88.89 % │ 50.00 % │ 100.00 % │ 91.67 % │ 8 │
│ │ └ page.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
│ ├ counter.tsx │ 85.37 % │ 100.00 % │ 100.00 % │ 100.00 % │ 69.57 % │ 12-17,24 │
│ ├ layout.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
│ └ page.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
├────────────────────────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
│ Summary │ 95.55 % │ 97.22 % │ 83.33 % │ 100.00 % │ 90.22 % │ │
└────────────────────────────────────┴──────────┴────────────┴──────────┴───────────┴──────────┴─────────────────┘(It requires the latest version monocart-coverage-reports@2.11.4) |
|
Very good to hear! I’m still tinkering myself with the config to get better result. But it’s pretty complex and some solutions I found are really hacky, so hopefully we can still improve them. I see for the counter.tsx/proxy.js problem you also found the same solution as me. My filter is a little bit different, because just filtering proxy.js would filter out actual source files with the same name (pretty unlikely but still) so I changed the filter to For the c4c472 file: I found it was the only chunk without a map file. Since I could find no way to filter this way (would be ideal for me if there was an option to exclude everything without a source map), I added this really hacky workaround in entryFilter: if (entry.source?.includes("sourceMappingURL") === false) {
return false;
}There's also an issue with client components (counter.tsx) not showing the correct branch information. This is caused by one of the included server chunks. Still not happy about this, but I initially fixed that by including this entryFilter: // '[project]/src/app/counter.tsx [app-ssr] (ecmascript)
// ssr version of client component, we should exclude these here because they conflict with the client-side bundle, which results in incorrect coverage statistics.
if (entry.functions?.some((f) => f.functionName.includes("[app-ssr]"))) {
return false;
}Again, I'm still tinkering but wanted to share what I had so far. |
|
@cenfun In the output you posted the coverage of actions.ts is correct. But when I run your latest commit on the turbopack branch I get this output with incorrect actions.ts coverage. I didn't make any changes to your branch locally. Is the output still correct on your side? |
|
here is my local output with [MCR] Next.js V8 Coverage Report
┌────────────────────────────────────┬──────────┬────────────┬──────────┬───────────┬──────────┬─────────────────┐
│ Name │ Bytes │ Statements │ Branches │ Functions │ Lines │ Uncovered Lines │
├────────────────────────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
│ localhost-3000/_next/static/chunks │ │ │ │ │ │ │
│ └ _c4c472._.js │ 99.26 % │ 100.00 % │ 75.00 % │ │ 93.75 % │ 1 │
│ src/app │ │ │ │ │ │ │
│ ├ about │ │ │ │ │ │ │
│ │ ├ actions.ts │ 95.11 % │ 88.89 % │ 50.00 % │ 100.00 % │ 91.67 % │ 8 │
│ │ └ page.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
│ ├ counter.tsx │ 85.37 % │ 100.00 % │ 100.00 % │ 100.00 % │ 69.57 % │ 12-17,24 │
│ ├ layout.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
│ └ page.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
├────────────────────────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
│ Summary │ 95.55 % │ 97.22 % │ 83.33 % │ 100.00 % │ 90.22 % │ │
└────────────────────────────────────┴──────────┴────────────┴──────────┴───────────┴──────────┴─────────────────┘npm version 10.8.2 Could you please try to reinstall? (remove package-lock.json and node_modules then |
|
I did, and I also deleted the .next folder. I also cloned the repository again, just to be on the safe side, but the coverage for actions.ts still doesn't show correctly (incorrect percentages + uncovered lines missing). It could be my machine, but I'm not sure how. npm 10.8.2 If I have to provide more details, just let me know. After some more tinkering, this is the config I ended up with. Might still move it to a mcr.config.js, and hopefully we can find a way to remove the hacks. But otherwise I'm happy enough with it. global-teardown.js and fixtures.js are the same as your code, so no special filtering is done there. This is my playwright config section: const coverageReportOptions: CoverageReportOptions = {
name: "Next.js V8 Coverage Report",
all: {
dir: "src",
filter: "**/*{js,ts,jsx,tsx}",
},
entryFilter: (entry) => {
// skip files without sourcemap
// this fixes _c4c472._.js showing up
if (entry.source?.includes("sourceMappingURL") === false) {
return false;
}
// client-side
if (entry.url.includes("next/static/")) {
return true;
}
// server-side
if (
entry.url.includes("next/server/") &&
// without this line coverage for server actions is not detected correctly
entry.url.startsWith("file:") &&
// ssr version of client component, including these messes up line coverage of client components
!entry.functions?.some((f) => f.functionName.includes("[app-ssr]"))
) {
return true;
}
return false;
},
sourceFilter: (sourcePath) => {
return (
!sourcePath.startsWith("node_modules/") &&
!sourcePath.startsWith("turbopack/") &&
!sourcePath.endsWith(".tsx/proxy.js") // generated proxies for client components
);
},
reports: ["v8", "console-details"],
};It results in the following output (I added a file with no tests, to test the Update: |
Describe the bug
I've tested next-with-playwright with Next.js 15, but the coverage file refer to js file, not ts file.
https://github.com/cenfun/nextjs-with-playwright
Probably, it can not resolve source-map.
To Reproduce
Coverage refer to *.js files.
Reproduce repository:
Expected behavior
Coverage for
*.tsxfilesErrors or Screenshots
Make a minimal reproduction
Additional context
I've checked https://nextjs.org/docs/messages/improper-devtool, but the result is not changed.
The text was updated successfully, but these errors were encountered: