Compiler error using "on" event handler

Questions Build Issues
1

Hi,

I’m using 3.13 and trying to modernize my code with decorators, tracked properties, etc. So far, so good, but I am having a problem with the new “on click” event handler format.

Here are a couple of statements that I use it in:

<PaperForm {{on "submit" this.submit}} as |form|>

{{on "click" (fn this.toggleAccordions "our-site" "problem")}}

And this is the error I am getting for both (and everywhere else I use this format):

Compile Error: Element modifiers are not allowed in components undefined

But the code works fine, and no errors are spit out in the console.

I really don’t understand the error message; the term “element modifiers” is kind of vague to me.

Can someone tell me what I am doing wrong?

Thanks,

Larry

2

I’m not 100% sure, but since you are on Ember 3.13, and the code seems to be running fine I think this is an error thrown by the template linter. This has been fixed on more recent versions, I believe an update of ember-template-lint should do the trick for you.

See Element Modifiers in components · Issue #696 · ember-template-lint/ember-template-lint · GitHub for a similar bug report.

In your snippet {{on is an element modifier. An element modifier is a type of userland object that is invoked by any “mustache statement” that is inside an element that isn’t part of an attribute / assignment.

3

Well, I was trying to get rid of that super-annoying browserslist: caniuse-lite is outdated error message that has been appearing a dozen times every time I start my local server. So I did an npm-update-all

That produced a slew of error messages that made my heart sink, but I checked out the package.json file and noticed 2 of the addons were older than the previous versions. (Because the originals were beta versions, and the npm-update-all backed them down to non-beta ones.)

So I reverted those 2 packages, did an npm install and voila! Not only did the browserslist: caniuse-lite is outdated error messages disappear, but so did the compiler error messages that I asked about.

Not sure why they went away, but I’m too happy to care. This is the kind of updating and maintenance that can easily cost someone a day or more (we’ve all “Been there, Done that”) and I am thrilled that I just killed 2 birds with 1 stone.

And since it’s Friday afternoon, this must be God’s way of saying, It’s Miller Time, Larry. So have a great weekend everyone!

And especially that @rwjblue guy, who (a) responded while I was typing this, (b) is always helping others, and (c) never seems to sleep. :grinning:

4

@rwjblue: thanks for the “on” explanation - much appreciated.

And I think you are right about it being the linter. I don’t have ember-template-lint in my package.json file, but I do have babel-eslint and that did get updated in the npm-update-all.

Thanks again, and have a great weekend!

5

Actually, I do have ember-template-lint in my package.json. I was looking in the devDependencies section, and it lives in scripts