Aurelia 2: Breaking change trying to update Aurelia Version

vNext
1

I am trying to update my Aurelia 2 app from version 2.0.0-alpha.21 to the latest and I seemed to have hit a breaking change I can’t figure out. I was able to narrow it down to the change from version 2.0.0-alpha.29 -> 2.0.0-alpha.30 but I don’t know enough about Typescript/javascript to understand what is happening.

The error I am getting at build time is:

ERROR in <pathToFile>
117:40-62
[tsl] ERROR in <pathToFile>(117,41)
      TS2554: Expected 1 arguments, but got 0.
ts-loader-default_e3b0c44298fc1c14

I am getting a similar error for dozens of files in my project.

First, I am not sure where the line number (117) comes from since the source file only has 72 lines in it.

I have been able to dig around enough to figure out that the issue seems to have something to do with injecting an object into the constructor. The basic class looks like:

@containerless()
@inject(DiscDbClient)
export class BoxsetDetails extends BaseComponent {

  client: DiscDbClient;

  constructor(client: DiscDbClient) {
    super();
    this.client = client;
  }
}

The BaseComponent constructor does not take any arguments.

If I change it to create the DiscDbClient in the constructor rather than using DI, then the error goes away:

@containerless()
@inject(DiscDbClient)
export class BoxsetDetails extends BaseComponent {

  client: DiscDbClient;

  constructor() {
    super();
    this.client = new DiscDbClient(); // Error goes away
  }
}

I also tried looking through the changes made in Aurelia version alpha.30 but couldn’t find anything obvious.

Any ideas or help would be appreciated. Thanks!

1 Like
2

This is related to a HMR bug, not from app code. Probably you can just upgrade to the next alpha (31) and it’ll work fine.

3

You are right that the compile time errors go away if I move to the next version. Unfortunately, starting with version Alpha.31 my routing seems to break. This is what actually sent me on the path of finding which version my code first broke on.

Starting with Alpha.31 (and all later builds) I get this error when trying to click on an item which used to route to a different page:

Uncaught (in promise) Error: Neither the route 'movie' matched any configured route at 'shell/movies' nor a fallback is configured for the viewport 'default' - did you forget to add 'movie' to the routes list of the route decorator of 'movies'?
    at entry.9aef7ca49f6a634e1752.bundle.js:1:309172
    at Rt (entry.9aef7ca49f6a634e1752.bundle.js:1:310127)
    at entry.9aef7ca49f6a634e1752.bundle.js:1:307486
    at Array.map (<anonymous>)
    at entry.9aef7ca49f6a634e1752.bundle.js:1:307478
    at E (entry.9aef7ca49f6a634e1752.bundle.js:1:11282)
    at Tt (entry.9aef7ca49f6a634e1752.bundle.js:1:307405)
    at entry.9aef7ca49f6a634e1752.bundle.js:1:307736
    at Array.map (<anonymous>)
    at entry.9aef7ca49f6a634e1752.bundle.js:1:307728

here is the routing entry for that route:

{ path: 'movie/:slug', component: import('./movie-releases/movie-releases'), title: 'Movie Releases' }

And here is the url that is being clicked on to cause the error:
https://localhost:5001/movie/west-side-story-2021

Previously, this routing was working fine. Are there some routing updates I need to make?

4

I should add that starting with 2.0.0-alpha.35 (through the latest version) I am getting a different error on loading my app:

Cannot read properties of undefined (reading 'setIsActive')
    at le.setIsActive (entry.c1cb3d46b53ecf29577c.bundle.js:1:349964)
    at entry.c1cb3d46b53ecf29577c.bundle.js:1:342136
    at Array.<anonymous> (entry.c1cb3d46b53ecf29577c.bundle.js:1:278248)
    at ie.publish (entry.c1cb3d46b53ecf29577c.bundle.js:1:30082)
    at z.publish (entry.c1cb3d46b53ecf29577c.bundle.js:1:278080)
    at entry.c1cb3d46b53ecf29577c.bundle.js:1:325065
    at T.invoke (entry.c1cb3d46b53ecf29577c.bundle.js:1:273622)
    at T.pop (entry.c1cb3d46b53ecf29577c.bundle.js:1:273539)
    at T.start (entry.c1cb3d46b53ecf29577c.bundle.js:1:273792)
    at entry.c1cb3d46b53ecf29577c.bundle.js:1:325267

So to summarize:
2.0.0-alpha.30 → build error
2.0.0-alpha.31 → 2.0.0-alpha.34 (routing error)
2.0.0-alpha.35 → latest (setIsActive error)

So 2.0.0-alpha.29 is the latest version I can run and still have my app run.

5

Have same issues
“version”: “2.0.0-alpha.40”,

{path: ‘/releases/:id/details’, component: DetailsRelease,},

<a load="/releases/${release.id}/details"> ${release.title} </a>

Uncaught (in promise) Error: Neither the route ‘releases’ matched any configured route at ‘my-app/releases’ nor a fallback is configured for the viewport ‘default’ - did you forget to add ‘releases’ to the routes list of the route decorator of ‘releases’?

If manually go to http://localhost:9000/releases/45/details viewmodel twill be loaded

6

@Vasiliy Can you please share a reproduction? Preferably via StackBlitz or a GH Repo?

7

Also, for information there is this fix: fix(router-lite): navigation to routes configured in ancestor nodes by Sayan751 · Pull Request #1514 · aurelia/aurelia · GitHub

8

Hm
In fresh project issue is not reproduce with same flow
Try to research, thx

9

Find
import {Aurelia, RouterConfiguration} from 'aurelia';
has issue
but

import {Aurelia}  from 'aurelia';
import { RouterConfiguration } from '@aurelia/router';

work correct

ide use inccorrect auto-include

1 Like