search

alexlafroscia / ember-cli-stencil

Automatic discovery of Stencil.js components for your Ember application
26 stars 7 forks source link

Unable to see/use custom elements #44

Closed Emerson closed 2 years ago

Emerson commented 2 years ago

I feel bad opening an issue here because I suspect I'm just missing some configuration and I'm very new to Stencil, but there is very little documentation around this setup so I'm not sure where else to go.

So I have a very basic HTML Stencil project that has two components (I just used the generator). I installed the dependencies in my host Ember app as outlined in the docs and have made sure to build my stencil project (it has a dist folder).

Things appear to work. My ember app builds fine and if I have the debug mode turned on I see:

  ember-cli-stencil:discovery found Stencil collection 'im-components' at '/Users/emerson/Code/frontend/im-components' +0ms
  ember-cli-stencil:app using addon configuration:
  ember-cli-stencil:app { autoImportCollections: true } +0ms
  ember-cli-stencil:app configuration enabled auto-importing stencil collections +1ms

Unfortunately, when I attempt to use one of my Stencil components I see nothing. The element is in the DOM, but it's empty, unstyled, and doesn't look like it's been imported properly.

Any idea where I should go from here? Is there a way to confirm which components have been imported? I'd be happy to chat about this if you have the time on Slack, the Ember Discord, or some other service.

I'm also interested in learning more about the developer experience of using Stencil components with Ember. We have a large application and want to move towards component driven development with Storybook and at first glance this seems like the way to do that.

Emerson commented 2 years ago

Hey - so I managed to get things working. Turns out that my project initially built ok, but hit an error when I tried to save a file. From there I was seeing errors about missing loader and esm files.

It led me to this issue. The fix I needed was to simply remove the esmLoaderPath property from the stencil.config.ts file. I think the Stencil generator needs to be updated with this change.

Anyways, sorry to be a bother. Thanks!