We are using a next.js project and can’t figure out how to get the debuggers breakpoints to work. The current problem is loading the source maps with next. We start the application by running:

yarn dev

which then runs nodemon with this config:

{
    "watch": ["pages", "components", "helpers", "models"],
    "ext": "js,json,ts,tsx",
    "exec": "node --inspect node_modules/.bin/next dev"
}

this is my launch.json for attaching the debugger:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Next.js: server-side",
            "type": "node",
            "request": "attach",
            "port": 9230,
            "skipFiles": ["<node_internals>/**"]
        }
    ]
}

So far everything works like a charm. This is the console output:

yarn run v1.22.22
$ nodemon
[nodemon] 3.1.3
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): pages/**/* components/**/* helpers/**/* models/**/*
[nodemon] watching extensions: js,json,ts,tsx
[nodemon] starting `node --inspect node_modules/.bin/next dev`
Debugger listening on ws://127.0.0.1:9229/24b40f81-bf44-4554-bdf4-ddc20d00ca5e
For help, see: https://nodejs.org/en/docs/inspector
Debugger listening on ws://127.0.0.1:9230/aa815bd6-d02f-4f9b-b265-48ae47cbe4eb
For help, see: https://nodejs.org/en/docs/inspector
   the --inspect option was detected, the Next.js router server should be inspected at port 9230.
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env.development

 ✓ Ready in 1038ms
Debugger attached.

But when I add a breakpoint in one of my api files it does not get bound and I get this message from the debug diagnostics:
debug diagnostics
As you can see this is the problem:

We couldn’t find a corresponding source location, and didn’t find any source with the name add.ts.

I tried adding sourcemaps but I am struggling with this part.
This is our tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "downlevelIteration": true,
        "sourceMap": true
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

and this our my next.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')]
    },
    output: 'standalone'
};

module.exports = nextConfig;

Does anybody have any idea how to make the debugger work?

Thanks in advance ❤️

I tried adding the sourcemaps via tsconfig and next.config.js configuration files but could not get it working. The error message or unbound breakpoints are still persisting