VSCode Debbuger - NodeJS - Typescript - Webpack

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.