Default Aurelia app scaffolding (first "makes" option) produces displaced breakpoints under Vite

Help Requests
1

Hello,

Running npx makes aurelia and choosing Default ESNext Aurelia 2 App:

Default app

produces an app that cannot be debugged properly. Breakpoints are displaced by anywhere from 1 to about 10 lines. Take a look at the problems below in trying to set breakpoints:

Setting breakpoints

This does not occur with Webpack.

Granted, I’m using the default configuration created by makes. But it should work correctly from the start.

2

I could not reproduce the issue. I don’t think the issue has anything to do with our skeleton, the skeleton didn’t even write any vscode config files.

Try latest vscode and plugins if you have not upgraded them.

3

I have upgraded everything. But a few releases ago of vscode, I suddenly had a problem with displaced breakpoints. It was a known issue, and Microsoft fixed it in the latest release.

I reached out here because I saw traces of issues with sourcemaps under Vite. But I’ll take what you’ve said as ruling out the scaffolding, and investigate further.

Thank you.

4

Changing the port from 9000 to 8080, appears to have solved the problem, though I’m not sure why.

UPDATE

Actually, this didn’t solve the problem. It only appeared to. You indicated that the skeleton doesn’t write any vscode config files. But I see this in the vite.config.js file:

import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import aurelia from '@aurelia/vite-plugin';
import babel from 'vite-plugin-babel';

export default defineConfig({
    server: {
        open: !process.env.CI,
        port: 8080,
    },
    esbuild: {
        target: 'es2022',
    },
    plugins: [
        aurelia({
            useDev: true,
        }),
        babel(),
        nodePolyfills(),
    ],
});

I don’t think this is a vscode problem. We had a displaced breakpoint issue about a month ago, but Microsoft pushed a fix. I get the feeling this is a sourcemap issue.

5

For me, setting a break point in vscode editor (no issue there) was ignored by vite, the dev app still runs without pause.

I assume you have a vscode plugin to allow break point to work with vite? I tried official vite plugin, it doesn’t do anything with my break point.

6

I wasn’t aware that I needed a vscode plugin to allow breakpoints to work with Vite. I assumed the skeleton, when Vite is chosen, would have been configured to support debugging without issue…as is the case with Webpack.

Earlier today, I scaffolded a default Vue 3+ application, which of course serves up dev content via Vite, and there were no issues with breakpoints and debugging (I did this just to rule out vscode definitively). I didn’t install into the workspace a Vite plugin for that either.

But am I to understand that you, too, are having issues?

7

First I rarely use break poinst in vscode, so I don’t have much experience there.
What I know isthat I don’t have issue about position of the break point, I cannot reproduce your issue.

The break point in vscode is probably designed for nodejs environment. Vite runs dev server, then your browser runs the actual the code. You can set break point in your browser’s dev tool. If you set break point in vscode, I assume there has to be some kind of integration between vite and vscode to work it out.

8

I have breakpoints working in vscode using Vite with Aurelia 2.00-beta14. My launch profile looks like this:

{
            "name": "Aurelia: Vite",
            "request": "launch",
            "runtimeArgs": [
                "run-script",
                "vite-dev"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**",
                "${workspaceFolder}/node_modules/**/*.js",
            ],
            "type": "node",
            "serverReadyAction": {
                "action": "debugWithEdge",
                "pattern": "http://localhost.*m([0-9]+)",
                "uriFormat": "http://localhost:%s",
                "webRoot": "${workspaceFolder}",
                "killOnServerStop": false
            }
        }

where “vite-dev” is a script defined in the package.json as

"scripts": {
    "vite-dev": "vite",
    "vite-build": "tsc && vite build",
    "vite-preview": "vite preview"
  },

AFAIK there’s no specific integration required between vite and vscode.

9

Thank you for this. Unfortunately, this doesn’t work either. I’m going to stick with Webpack.

It turns out there’s another issue: The babel-plugin-contracts plugin doesn’t work with Vite, and I rely on DbC. Our Au1 application relies on extensively.