Error when building React Wrapper in a Stencil Lib that uses another Stencil Lib

35 views Asked by At

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?

0

There are 0 answers