Embroider Compatibility: animated-container's dynamic Tag breaks build

[scottmessinger]

Describe the bug
When building an app that uses ember-animated, embroider throw an error when trying to build:

Build Error (PackagerRunner) in node_modules/ember-animated/templates/components/animated-container.hbs

Module Error (from /Users/scottamesmessinger/code/commoncurriculum/v4/app/static-frontend/node_modules/@embroider/hbs-loader/src/index.js):
Unsafe dynamic component: cannot statically analyze this expression in node_modules/ember-animated/templates/components/animated-container.hbs

It appears the problematic behavior is here in ember-animated/addon/templates/components/animated-container.hbs

{{!--
  The @class is only there to support a deprecated usage.
--}}
{{#let (element this.tag) as |Tag|~}}
  <Tag class="animated-container {{@class}}" ...attributes >
    {{yield}}
  </Tag>
{{/let}}

To Reproduce

• Install ember-animated (0.10.1
• Build with embroider (0.39.1) with these options:

    staticAddonTestSupportTrees: true,
    staticAddonTrees: true,
    staticHelpers: true,
    staticComponents: true,
    splitAtRoutes: [...]

Expected behavior

• Successful build!

Happy to submit a PR to fix this, but not sure how to handle dynamic tag names with Embroider.

[ef4]

I think this is due to tildeio/ember-element-helper#34. Maybe we can help get that landed, as far as I know all the blockers were taken care of.

[mschorsch]

@ef4 ember-element-helper@0.5 is releases.

[kevinansfield]

I've just tried adding this addon to our app which is not using embroider and I get a similar error when building:

>> Build Error (broccoli-persistent-filter:Babel > [Babel: ember-animated]) in ember-animated/components/animated-container.ts
>> 
>> /Users/kevin/code/Ghost/core/client/ember-animated/components/animated-container.ts: Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor
>>   65 |   tagName = '';
>>   66 |
>> > 67 |   @service('-ea-motion')
>>      |   ^
>>   68 |   motionService!: MotionService;
>>   69 |
>>   70 |   /**