VSCode Debbuger - NodeJS - Typescript - Webpack - node.js

Question

I'm litteraly pulling my hair out with this problem.
I can't use debugger with VSCode on my project, and i do not understand why.
The error :
app\server.ts:1
import app from './app'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1070:16)
at Module._compile (internal/modules/cjs/loader.js:1120:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47
Process exited with code 1
So the problem is i have my source map in another folder than the bundled code, it's something like this :
server.js (bundled)
app
server.ts
app.ts
build
sourcemaps
server.js.map (bundled)
My launch.json :
"configurations": [
{
"name": "Debug Program",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/app/server.ts",
"sourceMaps": true,
"outFiles": [
"${workspaceFolder}/build/sourcemaps/*"
],
"skipFiles": [
"<node_internals>/**"
]
}
]
If i use the bundled server.js, the debugger works, but i can't have breakpoints on my ts files (so it's a little useless for me).
There is my other files :
webpack.config.js
module.exports = {
entry: './build/server/server.js',
mode: process.env.NODE_ENV,
target: 'node',
output: {
path: path.resolve(__dirname),
filename: 'server.js',
sourceMapFilename: 'build/sourcemaps/server.js.map',
devtoolModuleFilenameTemplate : '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
include: [
__dirname + './build',
],
use: ['source-map-loader'],
}
]
},
externals: [ nodeExternals() ],
devtool: 'source-map',
resolve: {
extensions: ['.js']
},
stats: {
warningsFilter: ['Failed to parse source map'],
},
}
server.ts :
import app from './app'
import { config } from 'dotenv'
/* ################################################
Set Variables
################################################ */
config()
const port = process.env.SERVER_PORT
/* ################################################
Listening
################################################ */
const listen : Promise<any> = new Promise ((resolve, reject) => {
app.listen(port, () => {
resolve(port)
})
})
listen.then((port) => {
console.log(`Console launched on http://localhost:${ port }`)
})
listen.catch((err) => {
console.log(err)
})
app.ts :
import express from 'express'
import * as bodyParser from 'body-parser'
import { Routes } from './routes/routes'
import hbs from 'express-hbs'
class App {
public app: express.Application
public routePrv = new Routes()
constructor () {
this.app = express()
this.config()
this.setViewEngine()
this.prepareStatic()
this.mountRoutes()
}
/* ################################################
Config
################################################ */
private config(): void {
this.app.use(bodyParser.json())
this.app.use(bodyParser.urlencoded({ extended: false }))
}
/* ################################################
Templating Engine
################################################ */
private setViewEngine(): void {
const viewDir = './app/views'
this.app.engine('hbs', hbs.express4({
partialsDir: viewDir + '/partials',
layoutsDir: viewDir + '/layouts',
extname: '.hbs'
}))
this.app.set('view engine', 'hbs')
this.app.set('views', viewDir + '/pages')
}
/* ################################################
Assets
################################################ */
private prepareStatic(): void {
this.app.use('/public', express.static('./build/assets'))
this.app.use('/dist', express.static('./build/dist'))
}
/* ################################################
Routes
################################################ */
private mountRoutes(): void {
this.routePrv.routes(this.app)
}
}
export default new App().app
Thank you !!

Answer 1

I found the problem
Finally, the problem was in the sourcemap, which were not taken in account by vscode, because of a poor configuration in the gulp tasks...
After making my sourcemap point to the server.ts, with the good content, everything works.