Transpiled files in devtools in Next 11

Current Behavior

When you run an app ( npm run nx run app:serve) with NX@12.7.2 and Next@11.x, files in the sources tab in devtools are transpiled (?) and not very helpful.

If you try it with standalone Next.js@11.x or with NX@12.7.2 and Next@10.x, everything works fine:

NX + Next 11: (notice transpiled files)

NX + Next 10: (everything is fine)

Next 11 standalone: (everything is fine)

Notice that for “everything is fine” cases it works fine for both Webpack 4 and 5. I guess the issue is specifically in NX + Next 11.

Expected Behavior

NX + Next 11 should show “normal” files in devtools.

Steps to Reproduce

Easiest way to repro would be to create a workspace with npx create-nx-workspace and create it with next app. Then downgrade next to 10.2.0 to see the difference.

I’ve created a simple repo with 3 branches:

https://github.com/laSinteZ/testing-nx-12-7/tree/next-11-1-0 – Problem is here 😃 https://github.com/laSinteZ/testing-nx-12-7/tree/next-10-2-0 – NX 12.7.2 + Next 10 (everythign is fine there) https://github.com/laSinteZ/testing-nx-12-7/tree/next-11-without-nx – Next without NX (everything is fine there)

1. Clone it
2. Checkout needed branch
3. npm install
4. npm run nx run app:serve
5. Open devtools and observe.

I will be happy to provide more details on that matter.

Environment

NX Report complete - copy this into the issue template Node : 15.14.0 OS : darwin arm64 npm : 6.14.13

nx : Not Found @nrwl/angular : Not Found @nrwl/cli : 12.7.2 @nrwl/cypress : 12.7.2 @nrwl/devkit : 12.7.2 @nrwl/eslint-plugin-nx : 12.7.2 @nrwl/express : Not Found @nrwl/jest : 12.7.2 @nrwl/linter : 12.7.2 @nrwl/nest : Not Found @nrwl/next : 12.7.2 @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/react : 12.7.2 @nrwl/schematics : Not Found @nrwl/tao : 12.7.2 @nrwl/web : 12.7.2 @nrwl/workspace : 12.7.2 @nrwl/storybook : 12.7.2 @nrwl/gatsby : Not Found typescript : 4.3.5

[berkelmas]

Also having the same issue

[bdebon]

I have a similar problem but I can’t find any solution. My project app is a react app. At the initialisation of the page, the sourcemap looks good, and soon after it is replaced by build.umd.js:3103 which is super weird.

On the compilation logs, I have main.js but I don’t see the main.hot-reload.js file that is supposed to be here. At least it is on another fresh install.

I tried to check all the difference in project.json between the fresh install and my own project and I can’t find any difference… I’m a little bit lost here and don’t know where to dig more…