Having trouble debugging a Typescript Vue app in VS Code?

Question

Having trouble debugging a Typescript Vue app in VS Code?

When setting up my new Vue app, I followed these steps:

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: WebdriverIO
? Pick browsers to run end-to-end test on Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

After that, I added a launch.json to my VS Code setup following these configurations:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Furthermore, I created a vue.config.js file in the root of my project with the following content:

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

To troubleshoot an issue, I added a breakpoint in main.ts at the following code snippet:

createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

Upon running npm run serve from the command line and hitting F5 in VS Code, I encountered no breakpoint. How can I go about troubleshooting this? Could it be that Typescript is incompatible with Vue in this scenario, even though I've successfully used JS in previous projects?

typescript vue.js visual-studio-code vscode-debugger

Answer 1

Answer №1

It's disappointing that none of the solutions provided worked for me. Could it be because I was working with Single File Components (SFC) while others were not?

After delving deep into this issue for hours, I believe I have pinpointed the root cause:

During the compilation of your SFCs in Vue, they get divided into separate parts (<template>, <script>, and <style>) which are then processed by relevant loaders.

In the case of SFCs using TypeScript, the <script> section is compiled using the TypeScript Compiler (TSC). The challenge arises from TSC not recognizing the origin of the code it compiles, as it only receives the <script> content post-segregation by the Vue compiler.

As a result, TSC generates flawed Source Maps with incorrect line numbers (without adjustment for the <template> section), faulty source file references (due to hash-added filenames by Vue compiler), and incomplete source file content (containing <script> but lacking <template> and <style> code).

I can't delve into the fix here due to length constraints, but I recommend checking out my blog post on the topic.

To sum up, I managed to resolve the issue by utilizing the Webpack build process to rectify the faulty Source Maps.

Answer 2

It's disappointing that none of the solutions provided worked for me. Could it be because I was working with Single File Components (SFC) while others were not?

After delving deep into this issue for hours, I believe I have pinpointed the root cause:

During the compilation of your SFCs in Vue, they get divided into separate parts (<template>, <script>, and <style>) which are then processed by relevant loaders.

In the case of SFCs using TypeScript, the <script> section is compiled using the TypeScript Compiler (TSC). The challenge arises from TSC not recognizing the origin of the code it compiles, as it only receives the <script> content post-segregation by the Vue compiler.

As a result, TSC generates flawed Source Maps with incorrect line numbers (without adjustment for the <template> section), faulty source file references (due to hash-added filenames by Vue compiler), and incomplete source file content (containing <script> but lacking <template> and <style> code).

I can't delve into the fix here due to length constraints, but I recommend checking out my blog post on the topic.

To sum up, I managed to resolve the issue by utilizing the Webpack build process to rectify the faulty Source Maps.

Answer 3

Answer №2

For an effective approach, utilize the code snippet below to adjust your sourceMapPathOverrides

"sourceMapPathOverrides": {
        "webpack:///src/*.jsx": "${webRoot}/*.jsx",
        "webpack:///./src/*.js": "${webRoot}/*.js",
     }

Answer 4

For an effective approach, utilize the code snippet below to adjust your sourceMapPathOverrides

"sourceMapPathOverrides": {
        "webpack:///src/*.jsx": "${webRoot}/*.jsx",
        "webpack:///./src/*.js": "${webRoot}/*.js",
     }

Answer 5

Answer №3

To find a solution to your issue, you can refer to this recipe - https://github.com/microsoft/vscode-recipes/tree/master/vuejs-cli

When configuring your launch.json file, make sure it resembles the following example (you can exclude the preLaunchTask if not defined in tasks.json):

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "preLaunchTask": "vuejs: start"
    }
  ]
}

Answer 6

To find a solution to your issue, you can refer to this recipe - https://github.com/microsoft/vscode-recipes/tree/master/vuejs-cli

When configuring your launch.json file, make sure it resembles the following example (you can exclude the preLaunchTask if not defined in tasks.json):

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "preLaunchTask": "vuejs: start"
    }
  ]
}

Answer 7

Answer №4

After experimenting with various methods, I finally found one that actually solved the issue. source

All I had to do was add this snippet to my vue.config.js and suddenly my debugging feature started working.


/* eslint-disable */
const CompilerSfc = require('@vue/compiler-sfc')
const parse = CompilerSfc.parse
CompilerSfc.parse = (source, options) => {
    return parse(source, Object.assign({ pad: true }, options))
}

module.exports = {
    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: (info) => {
                if (info.allLoaders === '') {
                    // when allLoaders is an empty string the file is the original source
                    // file and will be prefixed with src:// to provide separation from
                    // modules transpiled via webpack
                    const filenameParts = ['src://']
                    if (info.namespace) {
                        filenameParts.push(info.namespace + '/')
                    }
                    filenameParts.push(info.resourcePath.replace(/^\.\//, ''))
                    return filenameParts.join('')
                } else {
                    // otherwise we have a webpack module
                    const filenameParts = ['webpack://']
                    if (info.namespace) {
                        filenameParts.push(info.namespace + '/')
                    }
                    filenameParts.push(info.resourcePath.replace(/^\.\//, ''))
                    const isVueScript =
                        info.resourcePath.match(/\.vue$/) &&
                        info.query.match(/\btype=script\b/) &&
                        !info.allLoaders.match(/\bts-loader\b/)
                    if (!isVueScript) {
                        filenameParts.push('?' + info.hash)
                    }
                    return filenameParts.join('')
                }
            },
        },
    },
}

Answer 8

After experimenting with various methods, I finally found one that actually solved the issue. source

All I had to do was add this snippet to my vue.config.js and suddenly my debugging feature started working.


/* eslint-disable */
const CompilerSfc = require('@vue/compiler-sfc')
const parse = CompilerSfc.parse
CompilerSfc.parse = (source, options) => {
    return parse(source, Object.assign({ pad: true }, options))
}

module.exports = {
    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: (info) => {
                if (info.allLoaders === '') {
                    // when allLoaders is an empty string the file is the original source
                    // file and will be prefixed with src:// to provide separation from
                    // modules transpiled via webpack
                    const filenameParts = ['src://']
                    if (info.namespace) {
                        filenameParts.push(info.namespace + '/')
                    }
                    filenameParts.push(info.resourcePath.replace(/^\.\//, ''))
                    return filenameParts.join('')
                } else {
                    // otherwise we have a webpack module
                    const filenameParts = ['webpack://']
                    if (info.namespace) {
                        filenameParts.push(info.namespace + '/')
                    }
                    filenameParts.push(info.resourcePath.replace(/^\.\//, ''))
                    const isVueScript =
                        info.resourcePath.match(/\.vue$/) &&
                        info.query.match(/\btype=script\b/) &&
                        !info.allLoaders.match(/\bts-loader\b/)
                    if (!isVueScript) {
                        filenameParts.push('?' + info.hash)
                    }
                    return filenameParts.join('')
                }
            },
        },
    },
}

Having trouble debugging a Typescript Vue app in VS Code?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways of modifying the readonly and required attributes of an HTML element using Angular2 Typescript

Troubleshooting VueJS, Electron, and Webpack integration with Hot Reload feature

Troubleshooting Angular 14 Custom Form Control Display Issue

Vue component unexpectedly refreshed without cause

Setting options using the form group in dropdowns in Angular can greatly enhance the user experience

Exploring LocalStorage Monitoring in Vue.js 2

What is the best way to implement useAsync (from the react-async-hook library) using TypeScript?

Displaying the final element in an array using v-if nested within a v-for loop

Make an http.patch request to the server using a Nativescript application

Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

Utilizing ES6 JavaScript for Creating Static Methods and Angular 2 Services

From integrating Vue 2 TSX to React TSX: ensuring seamless cooperation

Navigate to a specific position with a single click by accessing a class from another Vue component

An error was encountered in compiler.js at line 1021, stating that an unexpected value 'UserService' was imported by the module 'UserModule'. It is recommended to add a @NgModule annotation to resolve this issue

Having trouble triggering a method on button click using Vuetify's v-btn component

Excessive recursion detected in the HttpInterceptor module

Limiting the use of TypeScript ambient declarations to designated files such as those with the extension *.spec.ts

The attempt to run 'createElement' on the 'Document' has resulted in failure. The tag name inputted ('{{laravue.currentview }}') is not recognized as a valid name

Is it feasible to utilize tutorials designed for vue-cli with CLI 3 instead?

Vue - Struggling to invoke sweetalert2 within a method