# Weird error on compile customattribute

**URL:** <https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473>\
**Category:** Help Requests\
**Created:** [May 9, 2020, 10:36am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473 "2020-05-09T10:36:21Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![egbertn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/egbertn/32/1760_2.png) [@egbertn](https://discourse.aurelia.io/u/egbertn)\
**Post date:** [May 9, 2020, 10:36am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/1 "2020-05-09T10:36:22Z")

</div>

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

```

},

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 9, 2020, 10:47am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/2 "2020-05-09T10:47:56Z")

</div>

> [@egbertn](#):
>
> `constructor(private element: HTMLElement ) {`

Maybe irrelevant, but does this line work:

```ts
constructor(private element: HTMLElement ) {

```

Shouldn’t it be

```ts
constructor(private element: Element ) {

```

---

<div class="post-metadata">

**Author:** ![egbertn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/egbertn/32/1760_2.png) [@egbertn](https://discourse.aurelia.io/u/egbertn)\
**Post date:** [May 9, 2020, 10:51am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/3 "2020-05-09T10:51:50Z")

</div>

Element does not know ‘style’.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 9, 2020, 10:53am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/4 "2020-05-09T10:53:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [May 9, 2020, 10:55am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/5 "2020-05-09T10:55:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![egbertn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/egbertn/32/1760_2.png) [@egbertn](https://discourse.aurelia.io/u/egbertn)\
**Post date:** [May 9, 2020, 10:55am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/6 "2020-05-09T10:55:33Z")

</div>

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 {

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 9, 2020, 10:57am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/7 "2020-05-09T10:57:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![egbertn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/egbertn/32/1760_2.png) [@egbertn](https://discourse.aurelia.io/u/egbertn)\
**Post date:** [May 9, 2020, 10:57am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/8 "2020-05-09T10:57:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![egbertn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/egbertn/32/1760_2.png) [@egbertn](https://discourse.aurelia.io/u/egbertn)\
**Post date:** [May 9, 2020, 10:58am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/9 "2020-05-09T10:58:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [May 9, 2020, 10:59am UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/10 "2020-05-09T10:59:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![egbertn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/egbertn/32/1760_2.png) [@egbertn](https://discourse.aurelia.io/u/egbertn)\
**Post date:** [May 9, 2020, 1:32pm UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/11 "2020-05-09T13:32:04Z")

</div>

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

> <https://github.com/egbertn/Peshitta.Frontend/blob/master/src/custom/setpositionattribute.ts>

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [May 9, 2020, 1:42pm UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/12 "2020-05-09T13:42:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![egbertn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/egbertn/32/1760_2.png) [@egbertn](https://discourse.aurelia.io/u/egbertn)\
**Post date:** [May 9, 2020, 1:46pm UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/13 "2020-05-09T13:46:02Z")

</div>

Hero! Thank you so much.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [May 9, 2020, 2:50pm UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/14 "2020-05-09T14:50:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hiaux0](https://avatars.discourse-cdn.com/v4/letter/h/71c47a/32.png) [@hiaux0](https://discourse.aurelia.io/u/hiaux0)\
**Post date:** [May 11, 2020, 2:30pm UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/15 "2020-05-11T14:30:35Z")

</div>

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!)

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [May 11, 2020, 4:54pm UTC](https://discourse.aurelia.io/t/weird-error-on-compile-customattribute/3473/16 "2020-05-11T16:54:34Z")

</div>

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 😉