Serverless-webpack: VS Code Debugger Won't Pause on Debugger Statements

[agreea]

This is a Bug Report

Description

For bug reports:

• What went wrong?
  VS Code debugger doesn't stop on debugger statements, even though it does launch the process and attach successfully. Code executes as though debugger isn't there. js files in .webpack/ don't have the debugger statement.
  When I insert debugger statements into the ./webpack/service/foo.js file, VS Code pauses on debugger statements.

This looks like it's a problem with source mapping.

• What did you expect should have happened?
  Debugger statements in .ts files should show up in .webpack/*.js files.
• What was the config you used?

const path = require('path')
const slsw = require('serverless-webpack')
const nodeExternals = require('webpack-node-externals')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  entry: slsw.lib.entries,
  devtool: 'source-map',
  stats: 'verbose',
  resolve: {
    mainFields: ['browser', 'main', 'module'],
    extensions: ['.ts', '.js', '.json'],
    plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })]
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '/.webpack'),
    filename: '[name].js'
  },
  externals: [nodeExternals()],
  target: 'node',
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader'
      }
    ]
  }
}

• What stacktrace or error message from your provider did you see?

Similar or dependent issue(s):

• #94
• #42
  https://github.com/Microsoft/vscode/issues/29749

Additional Data

• Serverless-Webpack Version you're using:
  5.1.0
• Webpack version you're using:
  4.5.0
• Serverless Framework Version you're using:
  1.26.1

• Operating System:
  Mac OS Sierra

• Launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Serverless Offline",
      "program": "/usr/local/bin/sls",
      "cwd": "${workspaceRoot}/numi-transact-node",
      "args": ["offline", "--noTimeout", "--stage=dev"],
      "sourceMaps": true,
      "runtimeArgs": ["--lazy"],
      "outFiles": ["${workspaceFolder}/numi-transact-node/.webpack/**/*.js"],
      "protocol": "inspector",
      "runtimeExecutable": "node"
    }
  ]
}

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "rootDir": "./",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "lib": [
      "es5",
      "es6",
      "dom",
      "es2015.core",
      "es2015.collection",
      "es2015.generator",
      "es2015.iterable",
      "es2015.promise",
      "es2015.proxy",
      "es2015.reflect",
      "es2015.symbol",
      "es2015.symbol.wellknown",
      "esnext.asynciterable"
    ],
    "allowJs": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "noImplicitReturns": true,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./app/*"]
    }
  },
  "exclude": ["node_modules", "build", "webpack"]
}

Thank you!

[HyperBrain]

Hi @agreea , I think you're missing the mode configuration in your webpack config.

mode: slsw.lib.webpack.isLocal ? "development": "production",

If you do not set the mode property with Webpack 4.x it will default to production and might remove any debugger stuff.

Additionally you can compare your launch.json with the one in examples/babel-webpack-4 that is not explicitly TS but it is known to work.

[agreea]

Boom! That was it, thank you @HyperBrain

[bellizio]

@HyperBrain @agreea I know this issue has been closed months ago, but I am unable to get breakpoints to work in vscode when running in debug mode.

I have tried the launch.json config listed above, as well as the other variations of it out there that are related to this same issue. The debugger gets attached and serverless starts the app successfully, but breakpoints will not stick - i.e. they are greyed out and 'unverified'.

Any ideas?