Au 2.0RC: Default Vite/Babel skeleton uses Vite 6.0.3; displaced breakpoints

Hello Everyone,

In the spirit of firing up Au 2.0RC…

I just ran npx makes aurelia with the following configuration (copied from the terminal):

npx makes aurelia new-project-name -s babel,vitest

and Vite 6.0.3 is installed, not Vite 7. These are the relevant bits of the package.json file:

"dependencies": {
    "aurelia": "latest",
    "@aurelia/router": "latest"
  },
  "devDependencies": {
    "eslint": "^9.17.0",
    "globals": "^15.14.0",
    "@aurelia/testing": "latest",
    "stylelint": "^16.12.0",
    "stylelint-config-standard": "^36.0.1",
    "@aurelia/vite-plugin": "latest",
    "vite": "^6.0.3",
    "vite-plugin-node-polyfills": "^0.22.0",
    "vite-plugin-babel": "^1.3.0",
    "vitest": "^2.1.8",
    "jsdom": "^25.0.1",
    "@babel/plugin-proposal-decorators": "^7.25.9",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "@babel/eslint-parser": "^7.25.9"
  },

  ...

  "type": "module",
  "overrides": {
    "vite-plugin-node-polyfills": {
      "vite": "^6.0.0"
    }
  }

Should we not be running Vite 7?

Also, I am still unable to configure a launch file that is compatible with this skeleton in that breakpoints are still displaced, as I indicated in this post a year ago: Default Aurelia app scaffolding (first "makes" option) produces displaced breakpoints under Vite .

I followed the advice/discourse of @huochunpeng and @davidsk once again, and I’m still unable to make this work. Breakpoints are displaced in both vscode and in devtools.

It’s really starting to bum me out that the only configuration I can get to work is the Webpack/Babel configuration. I have abandoned the idea of being able to continue with the babel-contracts-plugin; I should move forward with Vite, and I’m good with that.

I completely uninstalled vscode, right out to the folders on my Mac, and then reinstalled it. I tried again before any extensions were installed. Still no luck. Also, my Mac is relatively new, used primarily for development.

What on earth could be the problem?

1 Like

I meant to point out the vite version to someone. Upgrading to 7 should be no issue if you can actually get your project to run.

Regarding the launch file. I was able to get breakpoints working with a PNPM workspace running in WSL using Claude sonnet, definitely let AI help you if you can. I am using typescript though which I think makes things easier.

I thankfully don’t have to have babel in my project and if I use a package that isn’t typescript, I’m going through a conversion process if I can.

I’m trying to determine if it’s significant that the skeletons are still pointing to Vite 6. And Vite/Babel is one of the supported options on makes.

I don’t embrace TS or AI, so I can’t really take your setup as an example.

I have a vanilla vscode setup on a relatively new Mac meant primarily for development. Nothing exotic.

I just don’t understand why there would there be problems with breakpoints? If the skeletons need to harmonize with a launch file, I would say we need to know how so.

What does vs code show when you hover over the breakpoint and look at why the breakpoints can’t be hit?

The breakpoints do show that they can be hit, but they’re displaced. I illustrate the problem in this post: Default Aurelia app scaffolding (first "makes" option) produces displaced breakpoints under Vite .

This problem telegraphs out to devTools as well, which tells me it has something to do with sourcemaps.

But for the life of me, I haven’t been able to hit upon a skeleton/launch config that solves the problem.

I would need to experiment a bit, but one thing the AI had me change was to actually add this to the viteconfig. Once upon a time I feel like I did run into the issue you are describing, but most of my issues have been centered around packages in the workspace. Quickly looking at your other post, I didn’t see that in your config

build: {
   sourcemap: true,
 }```

That was one of the first things I changed. Doesn’t solve the problem. Breakpoints are still displaced.

1 Like

I’ve got a PR which updates Vite, Babel and other dependencies with the makes CLI that should be in soon.

2 Likes

Excellent! I love WebPack, but I need to get onto Vite/Babel. So that’s great news!

Hello @dwaynecharrington ,

I just thought I’d update you on this.

I ran npx makes aurelia again, choosing Vite and Babel with basic routing, no other features, and it looks like the displaced breakpoints problem is solved! I can now set breakpoints like a normal person :slight_smile: !

However, if I make a simple change to welcome-page.js, hit save, and then bring up devTools, this is what I see in the console:

This problem was there before, but someone else had raised the issue, claiming it was occuring with every other save (which it was at that time as I had the same problem).

Has there been any progress on this, or at least a guess as to what it is?

1 Like

I think the issue you’re talking is related to these links:

Even if it was merged, I don’t think it was released yet

Thanks, @ghiscoding ! Those issues are related.

I’ll just bide my time, then. The issue isn’t holding up migration as I’m using Webpack/Babel at the moment.