Uncaught TypeError: (intermediate value)(intermediate value).__registerHost is not a function when register my components.

[gugadev]

Stencil version:

2.5.2

I'm submitting a:

• [x] bug report

Current behavior:

I compiled and publishing my components using:

outputTargets: [
    {
      type: 'dist-custom-elements-bundle',
    },
    ...
]

The package.json of the package:

{
    "name": "@pacificoseguros/pixie",
    "description": "Pacifico Seguros' Design System",
    "version": "0.1.1-beta.36",
    "license": "Apache-2.0",
    "main": "dist/custom-elements/index.js",
    "module": "dist/custom-elements/index.js",
    "dependencies": {
        "@stencil/core": "^2.5.2"
    },
    "peerDependencies": {
        "react": "16.9.0",
        "react-dom": "16.9.0"
    }
}

Then, when I install the library and register my components through customElements:

import {
    Button,
    Card,
    Accordion,
    AccordionItem,
    TextField,
    DatePicker,
    Checkbox,
    CheckboxGroup,
    Switch,
    Modal,
} from "@pacificoseguros/pixie/dist/custom-elements";

export function usePixie() {
    customElements.define(Button.tagName, Button as any);
    customElements.define(Card.tagName, Card as any);
    customElements.define(Accordion.tagName, Accordion as any);
    customElements.define(AccordionItem.tagName, AccordionItem as any);
    customElements.define(TextField.tagName, TextField as any);
    customElements.define(DatePicker.tagName, DatePicker as any);
    customElements.define(Checkbox.tagName, Checkbox as any);
    customElements.define(CheckboxGroup.tagName, CheckboxGroup as any);
    customElements.define(Switch.tagName, Switch as any);
    customElements.define(Modal.tagName, Modal as any);
}

I get many errors like this:

Uncaught TypeError: (intermediate value)(intermediate value).__registerHost is not a function

[gugadev]

Fixed for now using defineCustomElements(window).

[rwaskiewicz]

Thanks @gugadev! I apologize that it took so long for someone on the Stencil team to take a look at this issue. This is certainly a hole in our documentation that can be addressed by the team. I'm going to label this to get it into our backlog.

[christian-bromann]

Hi @gugadev 👋

We apologize for the delay in addressing this issue. The StencilJS team has been hard at work, and we appreciate your patience.

As StencilJS has undergone significant updates and improvements since this issue was originally posted, we believe that this specific concern may no longer be relevant with the latest version. Therefore, we are closing this issue.

If you are still experiencing this problem or have any new issues, please feel free to open a new issue with the latest details, and we will be happy to assist you.

Thank you for your understanding and support of StencilJS!