vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.32k forks source link

.vue file <script lang='ts' setup ></script> ts code, browser console, can not display the correct soureceMap corresponding source file, can not debug in browser console breakpoint,.vue文件中的 <script lang='ts' setup ></script>中的ts代码,浏览器的控制台,无法显示正确的soureceMap对应的源文件,无法在浏览器控制台断点调试, #7187

Open mengshangsuo opened 2 years ago

mengshangsuo commented 2 years ago

### Version 5.0.4

Environment info

Mac os ,  Windows10       

Steps to reproduce

使用vue-cli 5.0.4版本,选择ts和router,详细见如下包配置文件,然后在HomeView.vue文件添加 ,在scrpit中写点ts代码,添加console.log(); debugger, 打开浏览器进行调试,刷新,即可复现; { "name": "soucemap_bug", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vue/cli-plugin-babel": "5.0.1", "@vue/cli-plugin-eslint": "5.0.1", "@vue/cli-plugin-router": "5.0.1", "@vue/cli-plugin-typescript": "5.0.1", "@vue/cli-plugin-vuex": "5.0.1", "@vue/cli-service": "5.0.1", "@vue/eslint-config-typescript": "^9.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^8.0.3", "prettier": "^2.4.1", "sass": "^1.32.7", "sass-loader": "^12.0.0", "typescript": "~4.5.5" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "plugin:prettier/recommended" ], "parserOptions": { "ecmaVersion": 2020 }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }

What is expected?

期望可以在浏览器的控制台能够看到源码,进行断点调试

What is actually happening?

浏览器控制台,不能展示源码,无法断点调试

Wonder233 commented 2 years ago

same problem. vue-cli options: image

but it can't debugger in chrome. Source map is incorrect. image

Wonder233 commented 2 years ago

I find the reason. It is because of @babel version. You can downgrade @babel/core to 7.16.12

SD-Gaming commented 2 years ago

I find the reason. It is because of @babel version. You can downgrade @babel/core to 7.16.12

Thanks, this solves my problem. When I downgrade to 7.16.12, the good thing is back. I guess, @babel/core 7.17.0 switched to @ampproject/remapping to merge source maps, may it be the reason?