Source map genrating issue

[CGQAQ]

Describe the bug

This is related to #4912

In generated source map, you have two sources but only one sourceContents. this is not an issue on firefox windows but is a serious issue on chrome windows


and will screw up the debugger

And not only vue, you see there is inconsistency between file to file in react to

one file starts with C:, and the other start with c:, this will not cause an issue because

you got one two one match between sources and sourcesContent in the sourcemap

how to fix: don't mix up uppercase and lowercase Driver letter in sources, and don't add both of them to the sources, be sure to match up sources length with sourcesContent

Reproduction

...

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 11.60 GB / 23.88 GB
  Binaries:
    Node: 16.9.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.24.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.47)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[CGQAQ]

I will try to fix this issue

[CGQAQ]

vite generated sourcemap

rawMap:  SourceMap {
  version: 3,
  file: null,
  sources: [ 'D:/reprod/vue/src/components/HelloWorld.vue' ],
  sourcesContent: [
    '<script setup lang="ts">\n' +
      "import { ref } from 'vue'\n" +
      '\n' +
      'defineProps<{ msg: string }>()\n' +
      '\n' +
      'const count = ref(0)\n' +
      '\n' +
      'function increace() {\n' +
      '  count.value ++;\n' +
      '}\n' +
      '</script>\n' +
      '\n' +
      '<template>\n' +
      '  <h1>{{ msg }}</h1>\n' +
      '\n' +
      '  <p>\n' +
      '    Recommended IDE setup:\n' +
      '    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>\n' +
      '    +\n' +
      '    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>\n' +
      '  </p>\n' +
      '\n' +
      '  <p>See <code>README.md</code> for more information.</p>\n' +
      '\n' +
      '  <p>\n' +
      '    <a href="https://vitejs.dev/guide/features.html" target="_blank">\n' +
      '      Vite Docs\n' +
      '    </a>\n' +
      '    |\n' +
      '    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>\n' +
      '  </p>\n' +
      '\n' +
      '  <button type="button" @click="increace">count is: {{ count }}</button>\n' +
      '  <p>\n' +
      '    Edit\n' +
      '    <code>components/HelloWorld.vue</code> to test hot module replacement.\n' +
      '  </p>\n' +
      '</template>\n' +
      '\n' +
      '<style scoped>\n' +
      'a {\n' +
      '  color: #42b983;\n' +
      '}\n' +
      '\n' +
      'label {\n' +
      '  margin: 0 0.5em;\n' +
      '  font-weight: bold;\n' +
      '}\n' +
      '\n' +
      'code {\n' +
      '  background-color: #eee;\n' +
      '  padding: 2px 4px;\n' +
      '  border-radius: 4px;\n' +
      '  color: #304455;\n' +
      '}\n' +
      '</style>\n'
  ],
  names: [],
  mappings: ';AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB;;;;;;;;AAFwB;AAGM;AAC9B;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACpB;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,CAAC;;;;;;;'
}

plugin-vue using esbuild transformed sourcemap

esbuildMap:  SourceMap$1 {
  version: 3,
  mappings: ';AACA;;;;;;;AAIA,UAAM,QAAQ,IAAI;AAElB,wBAAoB;AAClB,YAAM;AAAA;;;;;;',
  names: [],
  sources: [ 'd:/reprod/vue/src/components/HelloWorld.vue' ]
}

[CGQAQ]

wtf? I ran yarn format

@yyx990803

[Shinigami92]

@CGQAQ So first: no need to tag Evan here, he doesn't even setup the whole formatting.
Vite is open source community project and we have a team that is triaging issues every day.

I checked the current main branch and when I freshly installed prettier (or I mean the whole dependencies) I didn't get such different formattings 🤔
So I think it is something on your side.

Only thing I may need to add to .prettierignore will be packages/vite/temp/, but this folder doesn't even get committed 🤷