Weird error on compile customattribute

Help Requests
1

Hi There,

I basically need an attribute which runs once and it will calculate the style.top and style.right when bind occurs.
Now I do have a project, which was ok, -until- I added this ts file.

import {autoinject} from ‘aurelia-framework’;
@autoinject
export class SetPositionCustomAttribute {

constructor(private element: HTMLElement ) {
    element.style.top =  element.parentElement.clientTop - 10 + 'px';
    element.style.right = element.parentElement.clientLeft + 'px';

}


bind() {
    console.log('la di dah');
}

}

Problem is that now suddenly, au run fails.
ERROR [BundledSource] Could not convert to AMD module, skipping src\custom\setpositionattribute.ts
ERROR [BundledSource] Error was: SyntaxError: unknown: Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (2:1):
For the obvious questions: Did you enable/disable I add tsconfig.json

“compilerOptions”: {

"module": "amd",

"noImplicitAny": false,

"declaration": false,

"typeRoots": [

  "./node_modules/@types"

],

"removeComments": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"sourceMap": true,

"target": "ES2017",

"lib": [

  "es2015",

  "dom"

],

"moduleResolution": "node",

"baseUrl": "src",

"resolveJsonModule": true,

"allowJs": true

},

1 Like
2

Maybe irrelevant, but does this line work:

constructor(private element: HTMLElement ) {

Shouldn’t it be

constructor(private element: Element ) {
3

Element does not know ‘style’.

1 Like
4

You can cast it to HTMLElement. The issue is in v1, the container only registers Element, not HTMLElement so it can’t inject that.

5

Yes that’s definitely the issue. Had the same a while back. As explained only the more generic Element gets injected since DI doesn’t know whether it’s HtmlElement or SvgElement. So you would need to cast it manually

1 Like
6

Great, thanks.

But the error remains. It’s as it as if the file is not part of the project.
Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (2:1):

I do run the cli aurelia version 1.3

1 | import {autoinject} from ‘aurelia-framework’;

2 | @autoinject
| ^
3 | export class SetPositionCustomAttribute {

1 Like
7

I think I’ve seen that issue. It’s only IDE issue, build will work fine. I’m not sure when it started happening but it wasn’t there in the past

8

it happens on ‘au run’ so, not IDE issue. My IDE (Visual Studio Code) thinks its all fine.

1 Like
9

So, when I change this to ‘esnext’ script style, the compilation error vanishes, but now the element won’t be injected.

1 Like
10

Can you try to recreate the issue in a new project which you can share?

1 Like
11

Sure, thank you very much.
I have it online.
https://github.com/egbertn/Peshitta.Frontendz
offending file…

1 Like
12

found the issue and created a PR for it https://github.com/egbertn/Peshitta.Frontend/pull/2

2 Likes
13

Hero! Thank you so much.

1 Like
14

Guess your ide just accidentally autocompleted the file ending. @hiaux0 could this be e.g handled by the vscode extension to provide a custom linting error if the file ending is detected?

1 Like
15

Yep for sure.
Could get the value of <require from="./custom/setpositionattribute"></require> and check if there is a file-ending or not.

(no estimation on when this will be added, but great idea!)

2 Likes
16

While it’s no tremendous feature it would certainly help debugging issues with non-descriptive errors like here. And let’s be honest once in a while everyone from us falls into something like this :wink:

1 Like