Quasar: VS Code debugging Typescript - breakpoints hit randomly

[TimTK17]

I'm having a problem with typescript debugging in VS Code: breakpoints hit randomly. I assume there's something wrong with source-maps, but can't figure out what.

It worked as expected up until @quasar/app v1.8.10. But versions 1.9.0 and higher break debugging (including v2.0.0 and v2.0.1 with new quasar.conf.js). I tried no-transpiling, removing IE11 - no luck.

To Reproduce

1. Create project with Quasar CLI:

   1. quasar create .
   2. SCSS
   3. Auto import
   4. All features selected:
   5. ESLint (recommended)
   6. TypeScript
   7. Vuex
   8. Axios
   9. Vue-i18n
   10. Composition API
   11. ESLint preset: Prettier
   12. Yarn

2. Start quasar: quasar dev

3. Launch Firefox debugging with the following launch.json:

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Firefox",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:8080/",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [
                {
                    "url": "webpack:///src/",
                    "path": "${webRoot}"
                }
            ]
        }
    ]

1. Add breakpoint in CompositionComponent.vue on line 24:

function useClickCount() {
  const clickCount = ref(0);
  function increment() {
    clickCount.value += 1 // line 24
    return clickCount.value; // line 25
  }

  return { clickCount, increment };
}

1. Click on ExampleComponent (in browser)
2. Breakpoint on line 24 is hit - good
3. Press F10 (step over) - debugger goes to line 30 instead of line 25.

It sometimes works as expected when the browser is reloaded, but then it acts up again.

--

Expected behavior
Debugger should go line by line.

Platform

VS Code Version: 1.46.1 (user setup)
Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
Date: 2020-06-17T21:13:20.174Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.17763

Debugger for Firefox v2.9.0

--
@quasar/cli - 1.1.0

package.json (not edited after quasar create):

"scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "@vue/composition-api": "^0.6.4",
    "axios": "^0.18.1",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0",
    "vue-i18n": "^8.0.0"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.0",
    "@types/node": "^10.17.15",
    "@typescript-eslint/eslint-plugin": "^3.3.0",
    "@typescript-eslint/parser": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-vue": "^6.1.2"
  },
  "browserslist": [
    "ie >= 11",
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }

[IlCallo]

Hey there @TimTK17, on v1.9 you get this problem when enabling modern mode or even without it?

[TimTK17]

Hi @IlCallo :) tried both - neither works.

[IlCallo]

Mmm... Interesting...
You said it works until v1.8.2, then you jumped to v1.9.0.
Does it work with v1.8.x greater than v1.8.2 but before v1.9.0?

[TimTK17]

I guess I mixed it up, my bad. Yes, it works with v1.8.10 (edited now). It's v1.9.0 when it breaks.

[IlCallo]

The problem is probably generated by these commits, but I haven't been able to pin-point the problem yet:

• https://github.com/quasarframework/quasar/commit/346694b58aa284261bf34e79da9d7e970d55c998#
• https://github.com/quasarframework/quasar/commit/97113a42cb6ed7e4caf9ffeaff1591b599797107

[webnoob]

@TimTK17 ~Are you using Auto import for components?~ I see you're using Auto import.

Can you try all instead and let me know if the problem persists?

[webnoob]

Can confirm this is definitely auto import related.

[TimTK17]

@webnoob Yes, it works with importStrategy: 'all', both in a fresh quasar project and my current one.

[webnoob]

The fix is PR'd, I'll be merging towards the end of the week and releasing an update early next week all being well.

[TimTK17]

@webnoob @IlCallo Thank you!

[mroes]

Thank you TimTK17 for describing the problem and thank you webnoob and IlCallo for the resolution.

[webnoob]

Fixed in @quasar/app v2.0.2

[charlie17]

Still not working for me using Chrome Debugger without Typescript - breakpoints jump around randomly - on Pkg @quasar/app... v2.0.4. Frustrating

[IlCallo]

@charlie17 can you provide a repro?