Aurelia 2 not respecting export default?

I already have a pretty gigantic app running in aurelia 1.
So I started to play with aurelia 2 and it looks simplified and promising.
First hurdle I came across was my classes can not be exported in default mode
for example, this works

    // sign-up.ts with a corresponding sign-up.html
    export class SignUp {
        private pageHeading: string;
        constructor()
        {
            this.pageHeading = 'Sign Up';
        }
    }

but this fails

// sign-up.ts
class SignUp {
    private pageHeading: string;
    constructor()
    {
        this.pageHeading = 'Sign Up';
    }
}
export default SignUp;

That means, I can no more do

import SignUp from './sign-up';

and I have to use

import {SignUp} from './sign-up';

That sounds weird because I believe aurelia has always been lot more standards compliant than any other framework.
Am I missing something?

this is the error I get in browser console with default export

Uncaught Error: No host element found.
    at new CompositionRoot (aurelia.js:27)
    at Aurelia.configureRoot (aurelia.js:200)
    at Aurelia.app (aurelia.js:153)
    at Aurelia.app (quick-start.js:51)
    at Module../src/main.ts (main.ts:18)
    at __webpack_require__ (bootstrap:19)
    at Object.0 (main.ts:19)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
1 Like

Aurelia works with any classes with sufficient metadata. So exports or not shouldn’t affect the outcome of how Aurelia works. What you saw may be some issue with the convention plugin. Maybe help create a gist for easier reproduction? https://gist.dumber.app

The Aurelia 2 conventions (which adds @customElement to your code, so you don’t have to write boilerplate) only touches exported classes, those un-exported classes are treated as internal classes.

The default export is bit tricky.

class A {}
export default A;

To correctly recognise that A is exported, we need to do proper scope analysis when doing static analysis on the source code. Because full scope analysis is required to correctly analyse following code.

class A {}
const B = A;
export default B;

Right now, you can double export to bypass this limitation.

export class SignUp {}
export default SignUp

This will allow you to use import SignUp from './sign-up';, the first export (which is not needed for you) enables conventions to add decorator to your code.

Wait, I forgot this is enough.

export default class SignUp {}

But you cannot do

export default class {} // anonymous class

Because class name is important to Aurelia conventions to find paired html file.

1 Like

I’m not the crusader here but perhaps you might wanna think why you’re using default exports in first place. Here is a nice article by @dwaynecharrington about the topic