Version

3.2.26

Reproduction link

vue3-ts-source-map

Steps to reproduce

$ vue -V
    @vue/cli 4.5.15
$ vue create vue3-ts-source-map
    ? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)
$ cd vue3-ts-source-map
$ vue add typescript
    ? Use class-style component syntax? Yes
    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
    ? Use TSLint? Yes
    ? Pick lint features: Lint on save
    ? Convert all .js files to .ts? Yes
    ? Allow .js files to be compiled? No
    ? Skip type checking of all declaration files (recommended for apps)? Yes
$ echo "module.exports = {
  configureWebpack() {
    return {
      devtool: 'source-map'
    };
  }
};" > vue.config.js
$ npm install
$ npm run serve

What is expected?

Chrome devtool -> Sources -> webpack://./src/App.vue shows original SFC sourcode like

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

What is actually happening?

App.vue shows some of source codes related to <script> only

import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}

I want to see the original SFC style source code in the Chrome devtool to debug with it. Just like when it working without typescript.

I'm really confusing this issue will be fixed or not. In https://github.com/vuejs/vue-cli/issues/2978, there no more progress to solve this kind of issue but, one of the blog posts, he got the original source code what I expected(but not able to debug without additional source map settings). And the latest version of vue-cli shows the same result with https://github.com/vuejs/vue-cli/issues/2978 again.

It seems about vue-cli, I tried it by vite that all is well.🤷

Okay, It is just expected behavior at least in vue-next project. vue-cli may handle kind of source map things. But, not sure cause it is a different project, right? Thank you for answer!