Colocated components within folders do not render

[esbanarango]

I'm trying out Embroider "0.44.2" with an App with colocated components. So we have them as:

app
 - components
   - componentA
     - template.hbs
     - component.js
   - componentB
     - template.hbs
     - component.js

componentA and componentB do not render at all nor throw any error. But if I change the structure to:

app
 - components
   - componentA.hbs
   - componentA.js
   - componentB.hbs
   - componentB.js

That "fixes" it. I don't want to migrate them all as we have a ton, plus, having them encapsulated in a single folder per name is more manageable.

I already tried disabling staticComponents. But no look... am I missing something?

Thank you 🙏

[NullVoxPopuli]

your first example isn't co-located components. Those are "pods". If you mass-rename component.js to index.js and template.hbs to index.hbs, things should start working again.

there is also a .ember-cli option to enable "nested" structure by default, if that suits you.

Here is an example of an embroider app using a mix of flat and nested component structure: https://github.com/NullVoxPopuli/limber/tree/main/frontend/app/components/limber/menu

[dcyriller]

Hi @NullVoxPopuli, @esbanarango,
I ran into this issue trying to migrate a (pods-based) app to use embroider.

I have created a reproduction here: https://github.com/dcyriller/__embroider-pods/pull/1

[nightire]

Hi @NullVoxPopuli, @esbanarango, I ran into this issue trying to migrate a (pods-based) app to use embroider.

I have created a reproduction here: dcyriller/__embroider-pods#1

change components/hello-world/template.hbs to components/hello-world/index.hbs or components/hello-world.hbs

[dcyriller]

Thanks @nightire! Does it mean that pods for components are officially not supported?

[lifeart]

@dcyriller try to specify podModulePrefix to "" (#930)

[dcyriller]

Nice catch @lifeart! But unfortunately it doesn't seem to fix the issue (the tests are still failing).

[lifeart]

in general, I think it's relatively easy to start support, but question is - should we support it...
for other side, pods already supported somehow, and it make sense to support, at least empty pod prefix for components resolution

[lifeart]

[lifeart]

I think "template.hbs" considered as route template for default case

[dcyriller]

Thanks for the pointer @lifeart, I have submitted a possible fix to support pods components when podModulePrefix === ''.

As two of you mentionned, it might be the good opportunity for our team to move from a pods-based component structure to the colocated. There is a codemod to migrate to the colocated components and it could modified to support the pods components. But it would mean migrating many components in multiple applications shared between many developpers... We will probably end up migrating to colocated components. But if we ran into the issue, it might be a blocker for other teams? Also, this layout is still documented in ember-cli official documentation. This is my reasoning to submit the fix :)

[lifeart]

@dcyriller if you desided to usptream pod-migrator, take a look at uELS possibilities to resolve components and it's paths (styles, tests, templates) https://github.com/lifeart/els-addon-glint/pull/3/files#diff-d2f687007dad013d62258c3c00adb4c54c921fe15f712e9319559ab7c1e0e833R196

[acorncom]

Looks like this can be closed, as #1007 was merged

[rahulk94]

I'd suggest renaming this issue to say pods instead of co-located components to avoid confusion for people looking for issues.

[ef4]

I'm assuming this was covered by #1007.

[ijlee2]

For those who land on this issue, I wrote a codemod to un-pod Ember projects. Feel free to give it a try.