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:
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.
Related issues
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
Most helpful comment
How wild, thank you @natemoo-re for the insights!