tildeio / ember-element-helper

Dynamic element helper for Glimmer templates.
MIT License
44 stars 23 forks source link

Expected a dynamic component definition, but received an object or function that did not have a component manager associated with it. #89

Closed NullVoxPopuli closed 2 years ago

NullVoxPopuli commented 2 years ago

Presentnly getting this error:

Uncaught (in promise) Error: Expected a dynamic component definition, 
but received an object or function that did not have a component manager associated with it. 
The dynamic invocation was `<(result of a `(helper function findElement)` helper)>` 
or `{{(result of a `(helper function findElement)` helper)}}`, 
and the incorrect definition is the value at the path `(result of a `(helper function findElement)` helper)`, 
which was: HTMLDivElement
    <anonymous> runtime.js:3021

Has something gone wrong with a transform? I'm using embroider.

❯ pnpm why ember-element-helper

dependencies:
ember-container-query 2.1.0
└── ember-element-helper 0.6.1
ember-element-helper 0.6.1
ember-headlessui 0.13.0
└── ember-element-helper 0.6.1

Happens on ember-source 4.4 and 4.5

chancancode commented 2 years ago

It seems like the ember-try scenario in CI was still working fine as of somewhat recently. Is this specific to something else? (e.g. strict mode/template-imports)

NullVoxPopuli commented 2 years ago

I am using strict mode / template-imports in my app, but the template that this error comes from is still loose mode:

(container query is what uses the element helper in the above error)

{{!-- app/templates/application.hbs --}}
<Limber::Portals />

<main class="grid grid-flow-col h-screen max-h-screen grid grid-rows-editor">
  {{#unless (in-iframe)}}
    <Limber::Header />
  {{/unless}}

  <ContainerQuery
    @features={{hash verticalSplit=(cq-aspect-ratio min=1)}}
    as |query|
  >
    <div
      class="
        {{if query.features.verticalSplit "flex-row" "flex-col"}}
        flex overflow-hidden"
    >
      <Limber::EditorContainer />

      {{! template-lint-disable no-inline-styles }}
      <section
        class="flex-1 shadow-inner grid overflow-hidden relative"
        style="grid-template-rows: min-content 1fr;"
      >
        {{#unless (in-iframe)}}
          <Limber::Navigation />
        {{/unless}}

        <div
          class="overflow-auto relative bg-white"
          {{constrain-vertically}}
          data-test-output
        >
          {{outlet}}
        </div>

        <Limber::Building />
        <Limber::Error />
      </section>
    </div>
  </ContainerQuery>

</main>
chancancode commented 2 years ago

What does the implementation of ContainerQuery (the actual invocation to the element helper) look like?

NullVoxPopuli commented 2 years ago

https://github.com/ijlee2/ember-container-query/blob/main/addon/components/container-query.hbs

{{#let (element this.tagName) as |Tag|}}
  <Tag

tagName defaults to div

chancancode commented 2 years ago

I also don’t know that this is really related to this addon? According to the message it seems like you have something along the lines of <Foo /> where Foo came from (findElement …) which isn’t really something this addon provides?

NullVoxPopuli commented 2 years ago

which isn’t really something this addon provides?

well, findElement isn't anything in ContainerQuery -- search https://github.com/ijlee2/ember-container-query/search?q=findElement

I've locally logged what Tag is, and it is an HTMLDivElement, which, to me, seems like this library should maybe provide a component manager for HTMLElements? maybe? What is the intent with HTMLElements as values in <ComponentSyntax />?

chancancode commented 2 years ago

That’s not what this addon does (we could possibly try to implement it that way but the managers don’t really have a “generate a template to render on the fly” capability right now).

This is the implementation: https://github.com/tildeio/ember-element-helper/blob/main/addon/helpers/element.js

It just generates a classic component and return that. So if you are getting a div something else is wrong. Where ever findElement came from it is probably heavily involved. Probably something clashed with the name element and overrode it.

NullVoxPopuli commented 2 years ago

ah yes, something goofy is going on, because what I have at runtime does not match that implementation (at all)

image

NullVoxPopuli commented 2 years ago

omg, this was in my app........

@chancancode I cannot facepalm hard enough here.