Sourcemap points to wrong line for thrown error at <template> directive

[mertcb]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

I am developing a tool that makes it easier to find errors by redirecting the errors thrown by Vue applications to the relevant lines in our own repositories, and with this problem, we can't redirect developers to right line of code.

You can find a slackblitz that shows the exact scenario.

In this scenario what I expect is after restoring stacktrace by sourcemap, I'd to see error has been thrown at line 14 of HelloWorld.vue

What happening is, after restoring stacktrace by sourcemap, stacktrace points error has been thrown at line 8, which is the end of the <script> directive, and it's wrong.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mpsjmqwf?file=package.json

Steps to reproduce

Run npm install on slackblitz then, run npm run build then npm run preview. You'll see some dist js and map files at dist/assets folder. Then open inspect tab in your browser and click throw error. Copy that stacktrace from error like following,

Error: This is test error!
    at ar.onClick.s.<computed>.s.<computed> (index-C5DAgDqG.js:17:6605)
    at yt (index-C5DAgDqG.js:13:38)
    at we (index-C5DAgDqG.js:13:108)
    at HTMLButtonElement.s (index-C5DAgDqG.js:17:4000)

and paste into https://sourcemap.tools/ after then copy the contents of map file in dist/assets and paste into this website too.

Then you'll see the stacktrace as following

Error: This is test error!
  at (../../src/components/HelloWorld.vue:8:19)
  at fn (../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:199:18)
  at callWithErrorHandling (../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:206:16)
  at callWithAsyncErrorHandling (../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:729:4)

After restoring stacktrace with sourcemap, you'll see the error points to end of the <script> directive, not the line where error has been thrown.

System Info

System:
    OS: macOS 15.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 88.73 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 18.0.1
  npmPackages:
    @vitejs/plugin-vue: ^5.2.1 => 5.2.1 
    vite: ^6.0.7 => 6.0.7

Used Package Manager

npm

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 vuejs/core 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.

[edison1105]

the root cause is that the source map does not include the source map of the template code.
I think this should be fixed at the core rather than at vite-plugin-vue.
I've made a PR to fix this one. see vuejs/core#12701

[mertcb]

Thanks, I'm closing the issue here, it should be continued on vue core side.