Stencil: app doesn't render my component

Created on 18 Nov 2018  路  5Comments  路  Source: ionic-team/stencil

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report

Current behavior:
I changed inner of AppHome component and it doesn't appear in DOM (and no console warning)

Expected behavior:
render component

Steps to reproduce:
delete app-profile component
change something in AppHome component

Related code:

import { Component } from '@stencil/core';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css',
  shadow: true
})
export class AppHome {
  render() {
    return (
      <div class='app-home'>
        <h1>Hello world</h1>
      </div>
    );
  }
}
import { Component } from '@stencil/core';


@Component({
  tag: 'app-root',
  styleUrl: 'app-root.css',
  shadow: true
})
export class AppRoot {

  render() {
    return (
      <div>
        <header>Hello world</header>
        <main>
          <stencil-router>
            <stencil-route-switch scrollTopOffset={0}>
              <stencil-route url='/' component='app-home' exact={true} />
            </stencil-route-switch>
          </stencil-router>
        </main>
      </div>
    );
  }
}

Other information:

Most helpful comment

How wild, thank you @natemoo-re for the insights!

All 5 comments

I am also getting the same issue. To recreate I start a new 'app/website' with the CLI using Stencil 0.15.1 and 0.15.2, when I remove the profile component everything breaks.

Removing node_modules and/or the .stencil folder doesn't seem to resolve it for me. I'm really baffled at what is happening...

I have also tried to re-add the profile component back with no luck

Try adding the following to app-root.tsx:

import '@stencil/router';

Not sure why, but in the current version of Stencil App Starter, @stencil/router is only imported by app-profile. Best practice is to place all imports in the app-root file, since you can get weird bugs like this otherwise.

How wild, thank you @natemoo-re for the insights!

This should be fixed in the latest version. If it's still a problem, would you be able to create an issue with a thorough description on how to replicate this? Thanks

Was this page helpful?
0 / 5 - 0 ratings