We are working on an ASP.NET MVC 5 application where we are incorporating TypeScript for client-side code and using webpack to bundle everything into a single js file. TypeScript has been installed via npm. However, we have encountered an issue where setting breakpoints in Visual Studio 2019 within a TypeScript file does not get hit. Interestingly, if we set a breakpoint using the browser's developer tools in the TypeScript file, it does show up in Visual Studio when hit. When we remove webpack from the equation and let Visual Studio compile the TypeScript file directly, we are able to set breakpoints without any issues.
Below is our packages.json file:
{
"name": "TypeScriptWebpackPlayground",
"version": "1.0.0",
"description": "",
"repository": "",
"main": "index.js",
"scripts": {
"Install": "npm install",
"WebpackDevelopment": "webpack --mode=development",
"WebpackProduction": "webpack --mode=production",
"Debug": "run-s Install WebpackDevelopment",
"Release": "run-s Install WebpackProduction"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"npm-run-all": "^4.1.5",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"webpack": "^5.17.0",
"webpack-cli": "^4.4.0"
}
Here is the tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
Here is the webpack config: (we have tried both source-map and inline-source-map)
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: "./ClientApp/app.ts",
devtool: "source-map",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
path: path.resolve(__dirname, "Scripts/custom"),
filename: "bundle.js"
},
plugins: [
new CleanWebpackPlugin()
]
};
This is the one-line TypeScript file where we are trying to set a breakpoint:
alert("Please break here!");