Having a really hard time setting up a breakpoint for debugger in VSCode to a very simple express project which uses tsx. I have 3 files inside my src directory

src/app.ts

import express, { NextFunction, Request, Response } from 'express';

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.get('/', (req: Request, res: Response, next: NextFunction) => {
    return res.json({ message: 'Hello World'}) // ADD BREAKPOINT HERE
})

export { app };

src/index.ts

import { server } from './server';

const port = process.env.SERVER_PORT || 3001

server.listen(port, () => {
    console.log('Listening to port ', port); // ADD BREAKPOINT HERE
});

src/server.ts

import http from 'http';

import { app } from './app';

const server = http.createServer(app);

export { server };

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "- Welcome to my awesome node.js project",
  "main": "index.js",
  "scripts": {
    "start": "tsx src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "dependencies": {
    "express": "^4.21.2",
    "typescript": "^5.7.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^22.9.0",
    "tsx": "^4.19.3"
  }
}

The typescript configuration follows the recommended config as per tsx

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",                                  
    "moduleDetection": "force",                        
    "module": "Preserve",                                
    "rootDir": "src",                                  
    "resolveJsonModule": true,                        
    "allowJs": true,                                  
    "outDir": "dist",                                   
    "isolatedModules": true,                          
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "skipLibCheck": true                                 
  }
}

The launch.json file also follows the recommended config as per tsx

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "tsx",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.ts",
      "runtimeExecutable": "tsx",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"]
    }
  ]
}

what is wrong with this setup and how to make debugging work?

Having a really hard time setting up a breakpoint for debugger in VSCode to a very simple express project which uses tsx. I have 3 files inside my src directory

src/app.ts

import express, { NextFunction, Request, Response } from 'express';

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.get('/', (req: Request, res: Response, next: NextFunction) => {
    return res.json({ message: 'Hello World'}) // ADD BREAKPOINT HERE
})

export { app };

src/index.ts

import { server } from './server';

const port = process.env.SERVER_PORT || 3001

server.listen(port, () => {
    console.log('Listening to port ', port); // ADD BREAKPOINT HERE
});

src/server.ts

import http from 'http';

import { app } from './app';

const server = http.createServer(app);

export { server };

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "- Welcome to my awesome node.js project",
  "main": "index.js",
  "scripts": {
    "start": "tsx src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "dependencies": {
    "express": "^4.21.2",
    "typescript": "^5.7.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^22.9.0",
    "tsx": "^4.19.3"
  }
}

The typescript configuration follows the recommended config as per tsx

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",                                  
    "moduleDetection": "force",                        
    "module": "Preserve",                                
    "rootDir": "src",                                  
    "resolveJsonModule": true,                        
    "allowJs": true,                                  
    "outDir": "dist",                                   
    "isolatedModules": true,                          
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "skipLibCheck": true                                 
  }
}

The launch.json file also follows the recommended config as per tsx

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "tsx",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.ts",
      "runtimeExecutable": "tsx",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"]
    }
  ]
}

what is wrong with this setup and how to make debugging work?

• typescript
• express
• visual-studio-code
• debugging
• breakpoints

Share Improve this question Follow edited Mar 10 at 15:23 James Z 12.3k1010 gold badges2727 silver badges4747 bronze badges asked Mar 10 at 11:13 PirateAppPirateApp 6,2781010 gold badges7474 silver badges124124 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The message occurs because it can't find your breakpoint, which might mean the code line where the breakpoint was set has changed, so the debugger can't find it now. You may need to reset the breakpoint or refresh the debugging session or restart the IDE