Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Glimmer Pods components are silently not rendering in Octane #18350

Closed
lolmaus opened this issue Sep 3, 2019 · 13 comments
Closed

Glimmer Pods components are silently not rendering in Octane #18350

lolmaus opened this issue Sep 3, 2019 · 13 comments

Comments

@lolmaus
Copy link

@lolmaus lolmaus commented Sep 3, 2019

Hi!

Description

Created a fresh app with the Octane blueprint.

Discovered that Glimmer components are not rendering when defined in the Pods structure. Instead, a <!----> comment is rendered.

Steps to reproduce:

  1. Create a fresh Octane app and a Glimmer component in Pods:

    npx ember-cli new glimmer-component-pods-bug -b @ember/octane-app-blueprint --yarn
    cd glimmer-component-pods-bug
    ember g component glimmer-component-pods -gc -cs -p
    
  2. Enable optional Pods in config/environment.js:

    modulePrefix: 'glimmer-component-pods-bug',
    podModulePrefix: 'glimmer-component-pods-bug/pods',
  1. Add some text to the component's template:

     Soupy Twist!
    
  2. Add the component to a parent template:

    Mr Music, will you play?
    <GlimmerComponentPods/>
    
  3. Run the app with ember s and visit http://localhost:4200 .

Expected result

I should see the following in the rendered HTML:

Mr Music, will you play?
Soupy Twist!

Actual result

I see the following in the rendered HTML:

Mr Music, will you play?
<!---->

The component has not rendered. There is no error in the browser console.

Reproduction

Reproduction repo: https://github.com/lolmaus/glimmer-component-pods-bug

config/environment.js:

    modulePrefix: 'glimmer-component-pods-bug',
    podModulePrefix: 'glimmer-component-pods-bug/pods',

Template:

<p>
  Glimmer Classic: <GlimmerComponentClassic/>
</p>

<p>
  Glimmer Flat: <GlimmerComponentFlat/>
</p>

<p>
  Glimmer Pods: <GlimmerComponentPods/>
</p>


<p>
  Classic Pods: <ClassicComponentPods/>
</p>

Rendered result:

image

image

Project structure:

image

Comment

The worst thing about is that Octane does not support Glimmer Pods, and ember-css-modules does not support Component Co-Location.

On the bleeding edge, we're stuck with classically separated component files. :finnadie:

@buschtoens

This comment has been minimized.

Copy link
Contributor

@buschtoens buschtoens commented Sep 3, 2019

Can you try running this without a different podModulePrefix?

    modulePrefix: 'glimmer-component-pods-bug',
    podModulePrefix: 'glimmer-component-pods-bug',

The components need to be moved on directory up then.

@lolmaus

This comment has been minimized.

Copy link
Author

@lolmaus lolmaus commented Sep 3, 2019

@buschtoens Tried, same result.

@chancancode

This comment has been minimized.

Copy link
Member

@chancancode chancancode commented Sep 3, 2019

@lolmaus

This comment has been minimized.

@chancancode

This comment has been minimized.

Copy link
Member

@chancancode chancancode commented Sep 10, 2019

@ffaubry

This comment has been minimized.

Copy link

@ffaubry ffaubry commented Sep 12, 2019

Same issue in my app. Thx @lolmaus for logging this issue.
My issue is slightly different but I believe is related.
You can find the repo there: https://github.com/ffaubry/octane-pods-bug

Steps to repro:

  • Create octane app using the blueprint
  • Edit .ember-cli.js files and add a line for 'usePods': true
  • Delete templates folder
  • Generate the application route again (will end up under app/application, PODS structure)
  • Generate a component using ember g component MyComponent -gc (will be under app/components, PODS structure)
  • Edit the app/components/my-component/template.hbs file and add something like <h2>Hello</h2>
  • Edit the application.hbs and add <MyComponent/>
  • Run the app, the component will not render

Note: if you don't generate the component using the -gc argument you will get another error. The app will crash saying Cannot find component MyComponent.

@fpauser

This comment has been minimized.

Copy link
Contributor

@fpauser fpauser commented Sep 27, 2019

Same here, really annoying.

@rwjblue

This comment has been minimized.

Copy link
Member

@rwjblue rwjblue commented Sep 27, 2019

@chancancode / @josemarluedke - Is this the same basic issue as ember-cli/ember-cli-htmlbars#308 ?

@josemarluedke

This comment has been minimized.

Copy link
Contributor

@josemarluedke josemarluedke commented Sep 27, 2019

I can confirm that is something going on here.

I just tested out in my octane app (using pods layout). I have moved one component to co-location (app/components/my-component/index.{hbs,js}), while leaving all other components in pods. That component now does not render, and It doesn't give any errors. It just doesn't render anything.

This comment has been minimized.

Copy link
Member

@rwjblue rwjblue commented Sep 29, 2019 — with Octobox

That component now does not render, and It doesn't give any errors.

Sorry, which one doesn't render? The component you moved into the colocation setup?

@chancancode

This comment has been minimized.

Copy link
Member

@chancancode chancancode commented Sep 30, 2019

I tried to reproduce the issue at ember-learn/super-rentals-tutorial#72 but everything seems to work correctly. If you are experiencing this issue please fork https://github.com/chancancode/super-rentals-pods-ish/ and see if you can make it fail!

@lolmaus

This comment has been minimized.

Copy link
Author

@lolmaus lolmaus commented Sep 30, 2019

I have upgraded the reproduction app to latest dependency versions from the Octane blueprint, and the issue is resolved.

image

@lolmaus lolmaus closed this Sep 30, 2019
@chancancode

This comment has been minimized.

Copy link
Member

@chancancode chancancode commented Sep 30, 2019

👍👍👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.