Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When using in an addon the helper throws unexpected error #55

Open
thoresuenert opened this issue May 25, 2021 · 4 comments
Open

When using in an addon the helper throws unexpected error #55

thoresuenert opened this issue May 25, 2021 · 4 comments

Comments

@thoresuenert
Copy link

When I use the following code directly in application.hbs it works:

//application.hbs
{{#let (element 'h1') as |Tag|}}
  <Tag class="my-tag">Test</Tag>
{{/let}}

Scenario with error:
This component comes from an addon

//heading.hbs
{{#let (element 'h1') as |Tag|}}
  <Tag class="my-tag">{{yield}}</Tag>
{{/let}}
// application.hbs
<Heading>Test</Heading>

throws the following error:

Uncaught (in promise) Error: Assertion Failed: The `element` helper polyfill encountered an unexpected error. Please report the issue at http://github.com/tildeio/ember-element-helper with the usage and conditions that caused this error.
    Ember 3
    deprecateMutationsInTrackingTransaction validator.js:180
    Ember 2
    cache manager.js:949
    tag reference.js:161
    track validator.js:820
    valueForRef reference.js:160
    <anonymous> runtime.js:2479
    evaluate runtime.js:1284
    evaluateSyscall runtime.js:5179
    evaluateInner runtime.js:5135
    evaluateOuter runtime.js:5127
    next runtime.js:6259
    _execute runtime.js:6243
    execute runtime.js:6213
    sync runtime.js:6316
    runInTrackingTransaction validator.js:154
    sync runtime.js:6316
    Ember 3
    inTransaction runtime.js:5021
    Ember 5
    invoke backburner.js:340
    flush backburner.js:229
    flush backburner.js:426
    _end backburner.js:960
    _boundAutorunEnd backburner.js:629
    promise callback*buildNext/< backburner.js:28
    flush Ember
    _scheduleAutorun backburner.js:1179
    _end backburner.js:970
    _boundAutorunEnd backburner.js:629
    promise callback*buildNext/< backburner.js:28
    flush Ember
    _scheduleAutorun backburner.js:1179
    _end backburner.js:970
    _boundAutorunEnd backburner.js:629
    promise callback*buildNext/< backburner.js:28
    flush Ember
    _scheduleAutorun backburner.js:1179
    _ensureInstance backburner.js:1167
    schedule backburner.js:776
    <anonymous> Ember
    fulfill rsvp.js:428
    resolve$1 rsvp.js:403
    initializePromise rsvp.js:526
    Ember 2
    initializePromise rsvp.js:520
    Promise rsvp.js:1021
    Ember 5
    invokeCallback rsvp.js:493
    publish rsvp.js:476
    <anonymous> Ember
    invoke backburner.js:338
    flush backburner.js:229
    flush backburner.js:426
    _end backburner.js:960
    _boundAutorunEnd backburner.js:629
    promise callback*buildNext/< backburner.js:28
    flush Ember
    _scheduleAutorun backburner.js:1179
    _ensureInstance backburner.js:1167
index.js:172

What do I miss here?

@thoresuenert thoresuenert changed the title When using in an addon the helper trows unexpected error When using in an addon the helper throws unexpected error May 26, 2021
@chancancode
Copy link
Member

Did you figure this out? What ember versions are you using and are there anything notable about your app? This add-on is reasonably popular and there is CI testing all supported LTS versions as well as ember release/beta/canary, so it's probably something specific in your setup or interaction with other admins you are using.

@csprocket777
Copy link

csprocket777 commented Jun 29, 2021

I am also experiencing the exact same issue.

Update:
I installed this in the consuming application and the error cleared up.

@MrChocolatine
Copy link

MrChocolatine commented Aug 6, 2021

Edit

The following post actually works, the fix was to install the add-on in the production dependencies:

ember install ember-element-helper --save

@chancancode, @rwjblue , we should mention it in the installation procedure.
↳ See #65.


Same issue here when trying your add-on in my add-on, which runns with [email protected].

  1. Creating a fake component

The use of the -cc (to create a Classic Component) is just to match the example from your README, but the same happens when creating a Template-Only component (flag -nc)

ember generate component -cc toto
  1. Populate its HBS file with the code provided in your README:
{{#let (element this.tagName) as |Tag|}}
  <Tag class="my-tag">hello</Tag>
{{/let}}

Its JS class is already populated:

import Component from '@ember/component'

export default class TotoComponent extends Component {}
  1. Add an integration-test
import { module, test } from 'qunit'
import { setupRenderingTest } from 'ember-qunit'
import { render } from '@ember/test-helpers'
import { hbs } from 'ember-cli-htmlbars'

module('Integration | Component | toto', function(hooks) {
  setupRenderingTest(hooks)

  test('it renders', async function(assert) {
    await render(hbs`<Toto @tag="span" />`)
    assert.dom().hasText('hello')
  })
})
  1. Result in the following error
Assertion Failed:
  The `element` helper polyfill encountered an unexpected error.
  Please report the issue at http://github.com/tildeio/ember-element-helper with the usage and conditions that caused this error.

@NullVoxPopuli
Copy link
Collaborator

is this still an issue? can we close? <3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants