I am facing an issue where I need to transition my vue files from JavaScript to TypeScript.
Currently, they have a standard structure like this:
<template>
...
</template>
<script>
...
</script>
To use them with TypeScript, I learned that I should change the script tag to <script lang="ts">. This modification works smoothly, and the code is successfully built/transpiled via webpack, allowing me to launch my app. However, I encountered a problem when I added lang="ts" to the script tag – Chrome no longer displays these files in debug mode, indicating a lack of sourcemap information for them (although I am not very familiar with sourcemaps). So, my question is how to ensure the correct generation of sourcemaps and display the files in Chrome developer mode again, as debugging will be necessary. Sourcemaps are available for all other files and are visible in dev mode on Chrome (e.g., for plain .ts files) and for vue files that are not yet TypeScript-based and therefore do not have the lang="ts" attribute.
Here is an excerpt from my webpack configuration 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']
},
Additionally, here are my tsc settings related to sourcemaps and other potentially relevant configurations:
"sourceMap": true,
"strict": true,
"alwaysStrict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
/* Source Map Options */
// "sourceRoot": "";
//"mapRoot": "",
//"inlineSourceMap": true,
// "inlineSources": true