Sourcemap missing for typescript based vue file due to lang="ts" attribute

Question

I got the issue that I want to switch my vue files from JS to Typescript.

They look like this (pretty standard)

<template>
...
</template>

<script>
...
</script>

and to use them with typescript I read that I need to adjust the script tag to <script lang="ts">. That works nicely and the code is happily build/transpiled via webpack and I can start my app. Only issue is that once i put lang="ts" into the script tag Chrome doesn't show these files in debug mode anymore and thus seems to be missing sourcemap infos for them (though I dont know much about sourcemaps). So I wonder how to get the sourcemaps right and the files displayed in Chrome developer mode as obviously I will need it again for debugging. Sourcemap for all other files is given and the files are shown in dev mode in Chrome (e.g. for plain .ts files) and also for vue files that are not yet TS based and thus have no lang="ts" attribute.

Here my webpack extract for ts and vue files

devtool: 'inline-source-map',
module: {
    rules: [
      { test: /\.vue$/,
        loader: 'vue-loader'
      },
      { test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ...
    ]
},
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json', '.ts']
  },

and my tsc settings for sourcemaps and some others that may be relevant

"sourceMap": true,                  
"strict": true,                         
"alwaysStrict": true,                  
"moduleResolution": "node",          
"allowSyntheticDefaultImports": true,  
"esModuleInterop": true,                   

/* Source Map Options */
// "sourceRoot": ""; 
//"mapRoot": "",
//"inlineSourceMap": true,              
// "inlineSources": true

Have the same issue but with ts file referenced in the .vue file. Breakpoints there take me to the webpack “harmony” salad file which feels like one step short of the real thing. — James White
– James White, Commented Nov 22, 2020 at 17:53

tony19 · Accepted Answer · 2022-07-15 05:51:08Z

2

I found that with devtool = 'cheap-module-eval-source' it works but directory of the .vue files is not shown and file endings are bit odd, but it works. But I wouldn't consider it a nice solution. So if sb has a nicer option, please let me know. However the next issue I faced was that Sonarqube wasn't accepting lang="ts" as they haven't implemented it yet (it's a feature request there).

So in the end the solution that works for me is not use .vue files but instead use class based sfc components as described in https://v2.vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components together with a vscode plugin to highlight inline html code. This way I got working TS, working source maps for debugging, working Sonarqube, working syntax highlighting, working, linting. My personal impression is that though vue.js is great the surrounding environment still has quite some gaps if you leave the beaten track.

edited Jul 15, 2022 at 5:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 20, 2019 at 10:47

TomFree

1,4494 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

WhiteFangs Over a year ago

In my case cheap-module-eval-source-map worked better than cheap-module-eval-source, in devtools I get the complete original scripts that are in my .vue files and nothing weird.

Collectives™ on Stack Overflow

Sourcemap missing for typescript based vue file due to lang="ts" attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related