bug: Couldn't find host element for "my-component" as it is unknown to this Stencil runtime.

[cl10k]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.36.0

Current Behavior

I'm trying to import the default my-component starter component (via npm init stencil -> component) into a Stencil Starter App (via npm init stencil -> app).

The starter app uses "@stencil/core": "4.22.2",
The starter component uses "@stencil/core": "4.36.0", (manually updated, the default was 4.27.x or something)

starter component, with a default value for the first prop:

import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop() first: string = "ABCDEFG";

  /**
   * The middle name
   */
  @Prop() middle: string;

  /**
   * The last name
   */
  @Prop() last: string;

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  render() {
    return <div>Hi World! I'm {this.getText()}</div>;
  }
}

I haven't tried importing the starter component via script tags BUT for dist/bundler and customElements output targets, the host app throws the following errors:

Error: Couldn't find host element for "my-component" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar GitHub issue.

Error: Can't render component with invalid Stencil runtime! Make sure this imported component is compiled with a externalRuntime: true flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime

It works if you remove the default value from the prop!

Edit: Exact same behavior for @State decorator with default value!

Expected Behavior

I expect all output targets to work with @prop with default values!
Edit: I expect all output targets to work with @State with default values!

System Info

Windows11 / WSL2 (Ubuntu), MS Edge

      System: node 22.13.0
    Platform: linux (6.6.87.2-microsoft-standard-WSL2)
   CPU Model: 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz (16 cpus)
    Compiler: /home/my-name/@projects/stencil-test-component/node_modules/@stencil/core/compiler/stencil.js
       Build: 1752598220
     Stencil: 4.36.0 🎊
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

Create a starter component, use a stencil/core version >4.22.3 & <=4.36.0 and try to import it via dist/bundler or dist-custom-elements output targets

Code Reproduction URL

nope

Additional Information

No response

[johnjenkins]

hi @cl10k - could you add a reproduction repo for this 🙏

When it comes to integrating Stencil within another Stencil project you don't import individual components - rather just the default export (e.g. import 'external-project') into a globalScript or a root component and Stencil should compile / export both component sets.