bug: dist-custom-elements re-assignment causes treeshaking to fail with webpack

[liamdebeasi]

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

2.12.0

Current Behavior

When using a dist-custom-elements Stencil library consumed through a single entry point, Webpack does not treeshake components properly causing all components to be bundled with an application.

This does not happen when consuming components by importing them directly from their built files.

Expected Behavior

I expect Webpack to only include the components I am using in my application when building.

Steps to Reproduce

1. Clone repo (make sure you are on the stencil branch).
2. Run cd component-library && npm install && npm run build to build the Stencil component library.
3. In the component-library directory, run npm pack.
4. In the root directory, run npm install.
5. Open src/index.js. Observe that only AppBadge is imported.
6. Run npx webpack.
7. Run grep -o -i -E 'Avatar Component|Badge Component' dist/main.js. This will search the built output for the "Avatar Component" and "Badge Component" strings. These strings are found in the app-avatar.js and app-badge.js files and are used to quickly tell if Webpack is bundling the components when building. Observe that both strings appear, meaning both AppBadge and AppAvatar are bundled with the app.
8. Update node_modules/component-library/components/app-badge.js with the following modifications:

import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';

let AppBadge$1 = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  render() {
    return (h(Host, null, "Badge Component"));
  }
};
-AppBadge$1 = /*@__PURE__*/ proxyCustomElement(AppBadge$1, [1, "app-badge"]);
+const AppBadge = /*@__PURE__*/ proxyCustomElement(AppBadge$1, [1, "app-badge"]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["app-badge"];
  components.forEach(tagName => { switch (tagName) {
    case "app-badge":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, AppBadge$1);
      }
      break;
  } });
}

-const AppBadge = AppBadge$1;
const defineCustomElement = defineCustomElement$1;

export { AppBadge, defineCustomElement };

9. Update node_modules/component-library/components/app-avatar.js with the following modifications:

import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';

let AppAvatar$1 = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  render() {
    return (h(Host, null, "Avatar Component"));
  }
};
-AppAvatar$1 = /*@__PURE__*/ proxyCustomElement(AppAvatar$1, [1, "app-avatar"]);
+const AppAvatar = /*@__PURE__*/ proxyCustomElement(AppAvatar$1, [1, "app-avatar"]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["app-avatar"];
  components.forEach(tagName => { switch (tagName) {
    case "app-avatar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, AppAvatar$1);
      }
      break;
  } });
}

-const AppAvatar = AppAvatar$1;
const defineCustomElement = defineCustomElement$1;

export { AppAvatar, defineCustomElement };

10. Run npx webpack.
11. Run grep -o -i -E 'Avatar Component|Badge Component' dist/main.js. Observe that only the "Badge Component" string appears, meaning only AppBadge is bundled.

Code Reproduction URL

https://github.com/liamdebeasi/webpack-reassignment-demo/tree/stencil

Additional Information

The re-assignment is something Webpack does not account for when building according to webpack/webpack#14962 (comment). I have filed an issue on the Webpack repo here: webpack/webpack#14963.

This issue does not impact non-Webpack bundlers such as Rollup.

This is currently impacting Ionic 6 applications where all Ionic components are being added to an app when consuming them through the @ionic/react entry point.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Stencil Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.
In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.
Thank you!

[pratheeshp007]

Hi, would like to know if this issues is prioritized in an upcoming release.

[rwaskiewicz]

This bug has been resolved in Stencil v2.14.1, which was released today (2022.03.07). I'm going to close this issue and mark it as shipped, thanks again!