When using in an addon the helper throws unexpected error

thoresuenert commented 3 years ago

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?

chancancode commented 3 years ago

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 commented 3 years ago

I am also experiencing the exact same issue.

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

MrChocolatine commented 3 years ago

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 https://github.com/tildeio/ember-element-helper/pull/65.

Same issue here when trying your add-on in my add-on, which runns with ember-cli@3.24.

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

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 {}

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')
  })
})

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 commented 1 year ago

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

tildeio / ember-element-helper

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