Open ZenSoftware opened 1 year ago
Same problem here after migrating a workspace from 15.4.5 to 15.6.3.
After reverting to Nx v15.6.2 from v15.6.3, breakpoints are working again. Something changed between 15.6.2 to 15.6.3 that breaks debugging with VSCode.
Reverting to 15.6.2 from 15.6.3 solved for me. The issue is that the paths in webpack are incorrect in 15.6.3
15.6.3 produces:
const nest_module_1 = __webpack_require__("../../libs/nest-module/src/index.ts");
15.6.2
const nest_module_1 = __webpack_require__("./libs/nest-module/src/index.ts");
just tested this with 15.7.2 and the issue still persists.
I am seeing this too with a NestJS application. But I'm not actually sure it's NestJS-specific. I can also replicate it with the following application:
import express from 'express';
const host = process.env.HOST ?? 'localhost';
const port = process.env.PORT ? Number(process.env.PORT) : 3000;
const app = express();
app.get('/', (req, res) => {
res.send({ message: 'Hello API' });
});
app.listen(port, host, () => {
console.log(`[ ready ] http://${host}:${port}`);
});
I can hit breakpoints when built/served with @nrwl/node
15.6.2 but not with 15.6.3. I can leave all other Nx package on 15.6.3 or higher.
This also means I need to keep using the @nrwl/node:webpack
executor. Moving to the @nrwl/webpack:webpack
doesn't work, regardless of the @nrwl/node
package version, which makes sense.
@Dzixxx's workaround didn't work for our projects. I added it to my "serve" target and tried with both the @nrwl/node
and @nrwl/webpack
build executors for my "build" target.
I also tried adding "sourceMap": true
directly within the build.options
, but that didn't work either.
Problem seems to still persist in 15.8.1
. I'm able to construct a launch.json
configuration that starts main.ts
directly with debugging, but that won't include webpacks magic. sourceMap
suggestions don't work either.
Problem still persists in the latest (15.8.5) version.
It seems that sources array in a generated source map have wrong relative path.
As a workaround, the following webpack.config.js
fixes the issue and outputs correct source map same as before it was broken:
const { composePlugins, withNx } = require('@nrwl/webpack')
const path = require('path')
// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
config.output.devtoolModuleFilenameTemplate = function (info) {
const rel = path.relative(process.cwd(), info.absoluteResourcePath)
return `webpack:///./${rel}`
}
return config
})
Still a issue
Bump this is a critical issue
Bump
Problem still persists in the latest (15.8.5) version.
It seems that sources array in a generated source map have wrong relative path.
As a workaround, the following
webpack.config.js
fixes the issue and outputs correct source map same as before it was broken:const { composePlugins, withNx } = require('@nrwl/webpack') const path = require('path') // Nx plugins for webpack. module.exports = composePlugins(withNx(), (config) => { // Update the webpack config as needed here. // e.g. `config.plugins.push(new MyPlugin())` config.output.devtoolModuleFilenameTemplate = function (info) { const rel = path.relative(process.cwd(), info.absoluteResourcePath) return `webpack:///./${rel}` } return config })
This worked for me. I also had to change project.json configuration adding these 2 lines that might not be present in case of upgrade from an older version:
"targets": {
"build": {
...
"isolatedConfig": true,
"webpackConfig": "apps/api/webpack.config.js",
...
},
},
Problem still persists in the latest (15.8.5) version.
It seems that sources array in a generated source map have wrong relative path.
As a workaround, the following
webpack.config.js
fixes the issue and outputs correct source map same as before it was broken:const { composePlugins, withNx } = require('@nrwl/webpack') const path = require('path') // Nx plugins for webpack. module.exports = composePlugins(withNx(), (config) => { // Update the webpack config as needed here. // e.g. `config.plugins.push(new MyPlugin())` config.output.devtoolModuleFilenameTemplate = function (info) { const rel = path.relative(process.cwd(), info.absoluteResourcePath) return `webpack:///./${rel}` } return config })
Thank you @gdraganic. With your workaround and the information in @pmosconi's comment, I was able to get this resolved in our workspace on Nx 15.9.2. We're in the middle of migrating from 14 to 15 right now and this bit us (just now realizing 16 came out a few hours ago 😭). Usually during major migrations I will go ahead and generate a "test app" with the newer schematics for each of our application types (Angular, Nest, React, etc.) just to make sure we keep up with any changes to project configurations that migrations may not capture, so thankfully I had already added the webpack.config.js
files to our node projects and set everything up to point them in the relevant project.json
files.
For greater convenience (we have multiple node apps), I created the below in tools/helpers/patch-nx-source-map-paths.js
with the following contents:
const path = require('path');
/*
* Temporary workaround for debugging Node applications being built with webpack and Nx.
* See: https://github.com/nrwl/nx/issues/14708#issuecomment-1457996600
*/
module.exports = function patchNxSourceMapPaths(config) {
config.output.devtoolModuleFilenameTemplate = function (info) {
const rel = path.relative(process.cwd(), info.absoluteResourcePath);
return `webpack:///./${rel}`;
};
return config;
};
And modified all of our webpack.config.js
files like so:
const { composePlugins, withNx } = require('@nrwl/webpack');
const patchNxSourceMapPaths = require('../../tools/helpers/patch-nx-source-map-paths');
// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
patchNxSourceMapPaths(config);
return config;
});
Hopefully this gets addressed soon.
thanks for the workaround. still an issue in 16.1.4
I tried upgrading from 15.9.2 to 16.2.2 and debugger is not even starting. VSCode output window says:
[error] [Extension Host] Error: Could not connect to debug target at http://localhost:9229: Could not find any debuggable target
I tried a few tweaks on project.json and launch.json but no luck...
Continues to fail in 16.3.2.
Still an issue in 16.4.0-beta.5
cc @FrozenPandaz
经过楼上大佬的讨论 目前 仅仅修改vscode的launch.json即可运行debug,但是这仅针对于vscode调试 其他code编辑器未试
"@nx/cypress": "^16.3.2",
"@nx/detox": "16.3.0",
"@nx/eslint-plugin": "16.3.0",
"@nx/jest": "16.3.2",
"@nx/js": "16.3.2",
"@nx/linter": "16.3.0",
"@nx/nest": "^16.3.2",
"@nx/node": "16.3.2",
"@nx/react": "^16.3.2",
"@nx/react-native": "16.3.0",
"@nx/vite": "^16.3.2",
"@nx/webpack": "16.3.2",
"@nx/workspace": "16.3.0",
其中backend可以替换成nx工作区内各自项目名称
{
"version": "0.2.0",
"configurations": [
{
"name": "nest",
"type": "node",
"request": "attach",
"port": 9229,
"restart": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceFolder}/apps/backend/*"
}
}
]
}
Hi guys,
The debugger didn't break on breakpoints I set (only with debugger;
) and I've figured our the root cause for me - might help others as well:
https://github.com/nestjs/swagger/issues/2496
Also this doesn't work not only with nest, but also with plain TS express application with executor @nx/webpack:webpack. NX 16.5.2
Any solution? The VSCode debugger doesn't work with 16.6.0 too.
You will either need to patch the webpack config with a custom devtoolModuleFilenameTemplate
like shown in the answers above (I went this route) or configure the sourceMapPathOverrides
in VSCode launch.json.
You will either need to patch the webpack config with a custom
devtoolModuleFilenameTemplate
like shown in the answers above (I went this route) or configure thesourceMapPathOverrides
in VSCode launch.json.
Thanks to this link, after adding this configuration I'm able to use debugger:
"configurations": [
{
"name": "Attach to node",
"type": "node",
"request": "attach",
"restart": true,
"sourceMapPathOverrides": {
"webpack:///./~/*": "${webRoot}/node_modules/*", // a default
"webpack:///./*": "${webRoot}/js-src/*", // unsure how/why webpack generates ./links.js
"webpack:///../*": "${webRoot}/js-src/*", // unsure how/why webpack generates ../links.js
"webpack:///*": "*" // a default, catch everything else
}
}
]
This worked for me. I also had to change project.json configuration adding these 2 lines that might not be present in case of upgrade from an older version:
"targets": { "build": { ... "isolatedConfig": true, "webpackConfig": "apps/api/webpack.config.js", ... }, },
Just to add some clarity, the 2 props should be in options
of build
as per the docs. This & the workaround snippet did the job for me.
"targets": {
"build": {
...
"options": {
...
"isolatedConfig": true,
"webpackConfig": "path/to/webpack.config.js",
...
}
...
}
}
Bump, still an issue in Nx 17.0.3
I'm taking suggestions but writing my own webpack config seems counterintuitive
Problem still persists in the latest (15.8.5) version.
It seems that sources array in a generated source map have wrong relative path.
As a workaround, the following
webpack.config.js
fixes the issue and outputs correct source map same as before it was broken:const { composePlugins, withNx } = require('@nrwl/webpack') const path = require('path') // Nx plugins for webpack. module.exports = composePlugins(withNx(), (config) => { // Update the webpack config as needed here. // e.g. `config.plugins.push(new MyPlugin())` config.output.devtoolModuleFilenameTemplate = function (info) { const rel = path.relative(process.cwd(), info.absoluteResourcePath) return `webpack:///./${rel}` } return config })
After upgrading from Nx 17.1.3 to v17.2.X this workaround no longer works for me. I'm curious if anyone has come up with a workaround that works for Nx v17.2?
After upgrading from Nx 17.1.3 to v17.2.X config.devtool
setted to false
by default.
Config with working breakpoints:
const { composePlugins, withNx } = require('@nx/webpack');
const path = require('path');
// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
config.output.devtoolModuleFilenameTemplate = function (info) {
const rel = path.relative(process.cwd(), info.absoluteResourcePath);
return `webpack:///./${rel}`;
};
config.devtool = 'source-map';
return config;
});
Adding config.devtool = 'source-map';
to the bottom of the config got my breakpoints working again. Thank you. It is very kind of you to have provided a working solution. 🎐
For version v17.2.7.
With the following config, still doesn't work. AM I missing somethings?
"isolatedConfig": true,
"webpackConfig": "apps/api/webpack.config.js"
and
const { composePlugins, withNx } = require('@nx/webpack');
const path = require('path');
// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
config.output.devtoolModuleFilenameTemplate = function (info) {
const rel = path.relative(process.cwd(), info.absoluteResourcePath);
return `webpack:///./${rel}`;
};
config.devtool = 'source-map';
return config;
});
{
"name": "Attach to Server",
"port": 9229,
"restart": true,
"request": "attach",
"type": "node"
}
Here's an nx 17.2.7 compatible typescript composable plugin for this (i take no credit for the actual solution -- thanks for everyone else above for coming up with it!):
// webpack.config.ts
import { NxComposableWebpackPlugin, composePlugins, withNx } from '@nx/webpack';
import path from 'node:path';
import merge from 'webpack-merge';
const withFixedSourceMapPaths: () => NxComposableWebpackPlugin = () => (config, ctx) =>
merge(config, {
output: {
devtoolModuleFilenameTemplate: (info: { absoluteResourcePath: string }) => {
const rel = path.relative(ctx.context.cwd, info.absoluteResourcePath);
return `webpack:///./${rel}`;
},
},
devtool: 'source-map',
});
export default composePlugins(withNx(), withFixedSourceMapPaths());
@francobasilico debugger works with version v17.2.8 using config like you have
@francobasilico debugger works with version v17.2.8 using config like you have
Fixed
Here is what worked for us , Nx 17.2.6 , thanks to everyone above 🎉
// // webpack.config.js
const { composePlugins, withNx } = require('@nx/webpack')
const path = require('path')
const { merge } = require('webpack-merge')
// Nx plugins for webpack.
module.exports = composePlugins(
withNx({
target: 'node',
}),
(config, ctx) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
return merge(config, {
output: {
devtoolModuleFilenameTemplate: (info) => {
const rel = path.relative(ctx.context.cwd, info.absoluteResourcePath)
return `webpack:///./${rel}`
},
},
devtool: 'source-map',
})
},
)
Has anyone tried to use port: 0
in the serve target of a project.json
?
Thanks for posting the solutions here, it's still an issue with 17.2.8. This is what worked for me, instead of using cwd I've used root path this change also makes it work if the current working directory is somewhere under the project itself
you can also try that commented-out webpack-merge approach
const { composePlugins, withNx } = require('@nx/webpack');
const path = require('path');
// const { merge } = require('webpack-merge');
// Nx plugins for webpack.
module.exports = composePlugins(
withNx({
target: 'node',
sourceMap: true,
}),
(config, ctx) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
config.output.devtoolModuleFilenameTemplate = function (info) {
const rel = path.relative(ctx.context.root, info.absoluteResourcePath);
return `webpack:///./${rel}`;
};
return config;
// return merge(config, {
// output: {
// devtoolModuleFilenameTemplate: (info) => {
// const rel = path.relative(ctx.context.root, info.absoluteResourcePath)
// return `webpack:///./${rel}`
// },
// },
// devtool: 'source-map',
// })
}
);
For nx@17.2.8
this launch.json
and webpack.config.js
configuration did the trick for me:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to NestJS",
"request": "attach",
"cwd": "${workspaceFolder}/apps/<my-nest-project>",
"type": "node",
"port": 9229
}
]
}
const { composePlugins, withNx } = require('@nx/webpack')
// Nx plugins for webpack.
module.exports = composePlugins(
withNx({
target: 'node',
}),
(config) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
config.devtool = 'source-map'
return config
},
)
Provided solution does not work when using dotenv
with nx serve
(Nx 17.2.8
).
However, it is a workaround for this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run and debug NestJS",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/.bin/nx",
"args": ["serve", "backend", "--configuration=development"],
"cwd": "${workspaceFolder}",
"envFile": "${workspaceFolder}/.env",
"env": {
"NODE_OPTIONS": "--max-http-header-size=100000",
"TS_NODE_IGNORE": "false",
"TS_NODE_PROJECT": "${workspaceFolder}/apps/backend/tsconfig.json"
},
"console": "integratedTerminal"
}
]
}
Of course I have also added following code to my webpack.config
: https://github.com/nrwl/nx/issues/14708#issuecomment-1883177763
the following config worked for me on nx@17.2.8
launch.json
from https://github.com/nrwl/nx/issues/14708#issuecomment-1905783979
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to NestJS",
"request": "attach",
"cwd": "${workspaceFolder}/apps/<my-nest-project>",
"type": "node",
"port": 9229
}
]
}
webpack.config.js
from https://github.com/nrwl/nx/issues/14708#issuecomment-1883177763
// // webpack.config.js
const { composePlugins, withNx } = require('@nx/webpack')
const path = require('path')
const { merge } = require('webpack-merge')
// Nx plugins for webpack.
module.exports = composePlugins(
withNx({
target: 'node',
}),
(config, ctx) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
return merge(config, {
output: {
devtoolModuleFilenameTemplate: (info) => {
const rel = path.relative(ctx.context.cwd, info.absoluteResourcePath)
return `webpack:///./${rel}`
},
},
devtool: 'source-map',
})
},
)
In my case it was much simpler. I am forcing the usage of the tsc
compiler, but even specifying "sourceMap": true
in tsconfig.base.json
(and not overriding it), the sourcemaps weren't being generated.
I just added "sourceMap": true
to my build
target, looking like this:
{
"targets": {
"build": {
"executor": "@nx/webpack:webpack",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/web-api",
"main": "apps/web-api/src/main.ts",
"tsConfig": "apps/web-api/tsconfig.app.json",
"assets": ["apps/web-api/src/assets"],
"webpackConfig": "apps/web-api/webpack.config.js",
"target": "node",
"compiler": "tsc",
"sourceMap": true
},
"configurations": {
"production": {
"optimization": true,
"extractLicenses": true,
"inspect": false,
"fileReplacements": [
{
"replace": "apps/web-api/src/environments/environment.ts",
"with": "apps/web-api/src/environments/environment.prod.ts"
}
]
}
}
}
}
}
Issue gone!
I am running Node 20.11.0 and Nx 17.2
By the way, it even works on IntelliJ IDEA and WebStorm debugger, that is what I actually use
for the love of god its been months why are we still doing a workaround for a basic necessary feature can this be resolved already?
And also fix multi-application debugging. The first app that gets built is the only one that can be debugged.
The same happens for node 18.19 and nx 18.0.4
https://github.com/nrwl/nx/issues/14708#issuecomment-1916808153
This solution still works
nx 18.0.7 and node 20.11.1 Still no vscode breakpoints out of the box. This is crucial.
For the last version this config worked for me
const { join } = require('path');
module.exports = {
output: {
path: join(__dirname, '../../dist/apps/orders'),
},
plugins: [
new NxWebpackPlugin({
target: 'node',
compiler: 'tsc',
main: './src/main.ts',
tsConfig: './tsconfig.app.json',
assets: ['./src/assets'],
optimization: false,
outputHashing: 'none',
sourceMap: true
}),
],
};
All this works, but after adding "build" target, the file watcher doesn't restart the server anymore. How do I fix that? I am using nx@18.0.8. I somehow realized, that if you use Monorepo integrated project structure, it does not work, while for Standalone project, it works. What is the issue here?
If anyone is still searching for the solution, in the webpack configuration file of your NestJS application, enable source map generation:
const { NxWebpackPlugin } = require('@nx/webpack');
const { join } = require('path');
module.exports = {
output: {
path: join(__dirname, '../../dist/projects/backend'),
},
plugins: [
new NxWebpackPlugin({
target: 'node',
compiler: 'tsc',
main: './src/main.ts',
tsConfig: './tsconfig.app.json',
assets: ['./src/assets'],
optimization: false,
outputHashing: 'none',
sourceMap: true, // <-- Add this
}),
],
};
Create a .vscode folder in the root of the repository. Create a file "launch.json", with the following contents:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Server",
"port": 9229,
"restart": true,
"request": "attach",
"type": "node",
"cwd": "${workspaceFolder}/projects/backend"
}
]
}
Adjust the working directory as needed. Now you can simply run the NestJS application (serve development), and attach the debugger:
I was trying to get this working using the auto-attach feature of VSCode so that I could use the serve
target as normal, but I was not able to get it working on v18.2.3 using this approach directly.
Checking the sourcemap it seems the problem with mapped file paths is not resolved so I combined @MilanKovacic suggestion with the answer from @nadiagoralski here and it now works.
Below is my complete webpack.config.js
, toggling auto attach to "with flag" works.
const path = require("node:path")
const { NxWebpackPlugin } = require("@nx/webpack")
/**
In the v17 version of the fix a context-variable with the root path was available.
It may be possible to get that value some other way, but for now this works
**/
const workspaceRoot = path.join(__dirname, "../..")
module.exports = {
output: {
path: path.join(__dirname, "../../dist/warehouse/api"),
devtoolModuleFilenameTemplate: (info) => { // ref: https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate
const rel = path.relative(workspaceRoot, info.absoluteResourcePath)
return `webpack:///./${rel}`
}
},
module: {
rules: [
{
test: /\.md$/,
type: "asset/source"
}
]
},
plugins: [
new NxWebpackPlugin({
target: "node",
compiler: "tsc",
main: "./src/main.ts",
tsConfig: "./tsconfig.app.json",
assets: ["./src/assets"],
optimization: false,
generatePackageJson: true,
outputHashing: "none",
sourceMap: true // Added source map to output (will not work without this)
})
]
}
@rudfoss
Did you set the "cwd" (current working directory) in your launch.json file? The difference between those two approach (with, and without devtoolModuleFilenameTemplate customization) is that by default, source map file will output the relative path (from the originating folder) pointing to the original files, for example:
"sources": ["webpack:///./src/app/app.controller.ts"]
This is the reason why working directory must be set to the originating folder. On the other hand, the customized approach is more robust, in a sense that mapping would look like this:
"sources": ["webpack:///./projects/backend/src/app/app.controller.ts"]
Reason why all of this doesn't work in nx out of the box is this:
config.devtool =
options.sourceMap === 'hidden'
? 'hidden-source-map'
: options.sourceMap
? 'source-map'
: false;`
Ideally, nx webpack plugin would use a fast source map strategy such as "eval-source-map" in development, and "source-map" in production.
Current Behavior
I am getting unbound breakpoints in VSCode when trying to debug Nest with a fresh
npx create-nx-workspace@latest
. This just suddenly started occurring over the past 3 days with no real cause that I can narrow it down to.Though creating a Nest app using @nestjs/cli with
npx @nestjs/cli@latest new
and serving withnest start --debug
with the same launch.json seems to work. It seems to be something specific to Nx.Expected Behavior
Breakpoints should work
GitHub Repo
No response
Steps to Reproduce
npx create-nx-workspace@latest
code . --disable-extensions
nx serve api
and start VSCode debuggerNx Report
Failure Logs
No response
Additional Information
No response