We are having a hard time trying to create our Stencil library with a React Wrapper that uses another Stencil library created by another team in our company.
Our React Wrapper -> Our Stencil Library > Stencil Library Dependency
Everytime we build our project the React Wrapper adds the components of the dependency library and exports it. They are added below the /* auto-generated react proxies */
section . This components are used by the components in the library we are developing, but they are not supposed to be exported and used outside by the consumers of our library.
/* auto-generated react proxies */
import { createReactComponent } from './react-component-lib';
import type { JSX } from '@myorg/my-core-frontend-components';
import { defineCustomElements } from '@myorg/my-core-frontend-components/dist/loader';
defineCustomElements();
export const OurAuthenticator = /*@__PURE__*/createReactComponent<JSX.OurAuthenticator, HTMLOurAuthenticatorElement>('our-authenticator');
export const OurHelper = /*@__PURE__*/createReactComponent<JSX.OurHelper, HTMLOurHelperElement>('our-helper');
export const ExternalButton = /*@__PURE__*/createReactComponent<JSX.ExternalButton, HTMLExternalButtonElement>('external-button');
export const ExternalParagraph = /*@__PURE__*/createReactComponent<JSX.ExternalParagraph, HTMLExternalParagraphElement>('external-paragraph');
As a result of this behavior, the build fails because HTMLExternalButtonElement
and HTMLExternalParagraphElement
cannot be resolved.
This behavior is not intended, but apparently it is exporting everything it recognizes as a Stencil component or is used in our components.
Any ideas how to enforce Stencil to build and export just the library's components?