Question 135502 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Can't debug typescript extension VS Code because it dit not found source file

I have been working on a vsCode extension and was able to launch and debug fine.

But now after bundling the extension with webpack I’m unable to bind breakpoints correctly

Things that I have tried

The dist folder contains an extension.js.map but still vscode is unable to bind the breakpoints
but the problem continues

The error I’m getting is:

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

enter image description here

Here are the relevant files

lauch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Run Extension",
            "type": "extensionHost",
            "request": "launch",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}"
            ],
            "outFiles": [
                "${workspaceFolder}/out/**/*.js"
            ],
            "preLaunchTask": "${defaultBuildTask}"
        },
        {
            "name": "Extension Tests",
            "type": "extensionHost",
            "request": "launch",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}",
                "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
            ],
            "outFiles": [
                "${workspaceFolder}/out/test/**/*.js"
            ],
            "preLaunchTask": "${defaultBuildTask}"
        }
    ]
}

Here is the webpack.config.js

'use strict';

const path = require('path');

/**@type {import('webpack').Configuration}*/
const config = {
    target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/

    entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
    output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
        path: path.resolve(__dirname, 'dist'),
        filename: 'extension.js',
        libraryTarget: "commonjs2",
        devtoolModuleFilenameTemplate: "../[resource-path]",
    },
    devtool: 'source-map',
    externals: {
        vscode: "commonjs vscode" // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
    },
    resolve: { // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
            test: /.ts$/,
            exclude: /node_modules/,
            use: [{
                loader: 'ts-loader',
                options: {
                    compilerOptions: {
                        "module": "es6" // override `tsconfig.json` so that TypeScript emits native JavaScript modules.
                    }
                }
            }]
        }]
    },
}

module.exports = config;
Tags:

2

Answers


  1. 0

    You need to change the outFiles configuration in your launch.json file to match the output folder of your webpack bundle. In your case, it should be:

    "outFiles": [
    "${workspaceFolder}/dist/**/*.js"
]

    This will tell VSCode where to look for the source maps and the transpiled JavaScript files that correspond to your TypeScript files. The devtoolModuleFilenameTemplate option in your webpack.config.js file is also important, as it tells webpack how to generate the source map paths relative to your workspace folder.

    The reason why you are getting the error We couldn't find a corresponding source location, and didn't find any source with the name extension.ts is because VSCode is looking for the source file in the out folder, which is not where webpack puts it. By changing the outFiles configuration, you are telling VSCode to look for the source file in the dist folder instead, where webpack has generated the source map and the transpiled JavaScript file.

    To understand more about how VSCode debugs TypeScript files with webpack, you can read this article: https://code.visualstudio.com/docs/typescript/typescript-compiling#_webpack

    I hope this answer helps you solve your problem.

    Login or Signup to reply.
  2. 0

    Another solution that is worth trying, is to re-open visual studio directly in the folder that your project is contained within.

    On windows (perhaps also mac), navigate to the folder where your project is located with a terminal and open code here with:

    code .

    Try your debugging tools again, and see whether or not you hit the break points this time.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search