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  

Answer 1

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.