Source code mapping error!

[1593292349]

Version

15.9.8

Reproduction link

github.com

Steps to reproduce

1. Pull projects and install dependencies with 'npm install'
2. perform 'npm run build'
3. open 'dist/index.html'
4. click print statement link in console, It cannot jump to the correct code location

What is expected?

When I debug the code, I jump to the correct code location.

What is actually happening?

It jumps to another page location

[1593292349]

I found other people's advice in Webpack.

Chrome doesn't parser relative source in source map sources, i.e. sources: ["webpack://demo/src/App.vue", "webpack://demo/src/./App.jsx"], here two workarounds:

1. Open an issue in vue-loader and always convert sources to relative to context, so you will have the same value in sources
2. Wait fix in chrome, because I found it is a bug

[YFengFly]

It's the same problem. Vue 2.7.7, Vue CLI 5.0.8(Webpack 5.73.0), vue-loader 15.10.0

As a temporary solution, you can use Chrome 98 or lower to view the correct Source Map, Chrome 99 has adjusted its rules.

[joaopslins]

We're having the same issue: Out of nowhere our source maps stopped working locally, I was guessing some dependency update but seems to be Browser related. Is this related to any specific condition or it's happening to everyone? I'll try to reproduce on Chrome 98 and other browsers as suggested.

[YFengFly]

我注意到，Chrome 103 ~ 105 一直在改进 Source Map 中的问题，故进行了尝试。 I noticed that Chrome 103 ~ 105 keeps fixing problems in Source Map, so I tried to verify it. 在如下环境中，Source Map 应该恢复了正常，请各位在自己的环境中再验证一下： In the following environment, the Source Map should be back to normal, you can verify this in your own environment:

• Chrome 104
• Vue CLI 5 (Webpack 5)
• Vue 2.7

注意：从该链接中能够发现，并非所有的 Source Map 都随之修正。 Note: As you can see from this link, not all Source maps are corrected.

https://stackoverflow.com/questions/71387156/google-chome-99-devtools-source-tab-not-showing-vue-file-code-in-webpack-src-fo/72061160

[1593292349]

@YFengFly There are still problems demo.zip

[YFengFly]

@1593292349 In this demo, I had the same problem browsing in Chrome 104, with all the Source Maps is not in the right place. 在你提供的这个 Demo 中，我在 Chrome 104 同样复现出了问题， Source Maps 也没有在正确的位置。 But....When I use <script setup>... 吊诡的来了，当我用 setup 时... They're back to normal ? What's happen??? 居然恢复正常了？？这什么鬼？？ I just modify Test.vue like this: 我只是将 Test.vue 改成了这样:

<template>
  <div>test</div>
</template>

<script setup>
console.log("setup test");
</script>

<style lang="scss"></style>

Probably only Options API has this problem? 莫非只是选项式 API 的 Source Map 容易出问题吗...

I mixed setup in my project, so my source maps back to normal? 难怪我的 Source Map 恢复了正常，我项目里混用了 setup

[1593292349]

@YFengFly Thank you. Everything looks fine, so try to use Composition API

[1593292349]

@YFengFly I found another bug where the vue file can't see the source code when using typescript. ts-demo.zip

[YFengFly]

This problem is not only found in Chrome 104, but also in Chrome 98.But if I use Vue 3, the source maps is usual.Maybe this problem started a long time ago.Or create a new issue and mention this one? 不仅Chrome 104有这个问题，Chrome 98也有。但是若用了 Vue 3，Source Map 则是正常的。这可能是比较久的问题了。要不新建一个议题并提及这个？