Version

3.1.4

Reproduction link

sfc

Steps to reproduce

As the image above, when I click row 7 in the compiled code, it locate to row 10 in the source map, which should be row 9. When breakpoint is row 9, msg is undefined unless step to row 10.

chrome(91.0.4472.124), Win 10, package.json:

{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "pre-build": "vue-tsc --noEmit && vite build --mode development",
    "serve": "vite preview",
    "postinstall": "bash scripts/post-install.sh"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^6.0.1",
    "ant-design-vue": "^2.2.2",
    "axios": "^0.21.1",
    "laravel-echo": "^1.10.0",
    "md5": "^2.3.0",
    "mockjs2": "^1.0.8",
    "nprogress": "^0.2.0",
    "pusher-js": "5.1.1",
    "store": "^2.0.12",
    "vue": "^3.1.4",
    "vue-router": "4",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/eslint-parser": "^7.14.7",
    "@iconify/json": "^1.1.369",
    "@types/md5": "^2.3.0",
    "@types/node": "^15.12.4",
    "@types/nprogress": "^0.2.0",
    "@types/store": "^2.0.2",
    "@typescript-eslint/eslint-plugin": "^4.28.0",
    "@typescript-eslint/parser": "^4.28.0",
    "@vitejs/plugin-legacy": "^1.4.3",
    "@vitejs/plugin-vue": "^1.2.5",
    "@vitejs/plugin-vue-jsx": "^1.1.6",
    "@vue/babel-plugin-jsx": "^1.0.6",
    "@vue/compiler-sfc": "^3.1.4",
    "autoprefixer": "^10.2.6",
    "eslint": "^7.30.0",
    "eslint-plugin-vue": "^7.13.0",
    "less": "^4.1.1",
    "postcss": "^8.1.0",
    "rollup": "^2.52.7",
    "typescript": "^4.3.2",
    "vite": "^2.4.2",
    "vite-plugin-components": "^0.12.2",
    "vite-plugin-html": "^2.0.7",
    "vite-plugin-icons": "^0.6.4",
    "vue-eslint-parser": "^7.8.0",
    "vue-tsc": "^0.0.24"
  }
}

What is expected?

source map can location correctly

What is actually happening?

There's one or more row dislocation in the source map, the real code running is behind the breakpoint in source map.

I don't know the problem is vue 3 or vite, maybe it can't reproduce with webpack. And vue 2.x and webpack do not has this problem.

this is cause by antfu/vite-plugin-components#107,and is fixed with vite-plugin-components 0.13.2