ReactJS Output target using 2 Stenciljs component libraries

[fredcido]

Hi there,

We have the following setup:

• Library A (built with Stenciljs, holds simple components, buttons, input, etc)
• Library B (Built with Stenciljs and uses Library A components to deliver more complex components)
• ReactJS components from Library B using @stencil/react-output-target.

In the components.ts of the Library B we have:

import 'library-a';

Then, we are able to use the components from Library A in Library B. However, when using the @stencil/react-output-target from Library B, we are getting the file src/components.ts with an error. It tries to create Reactjs wrapper components to Library A using the LocalJSX of the Library B.

Something like:

import type { JSX } from 'library-b';
export const MyButton = /*@__PURE__*/createReactComponent<JSX.MyButton, HTMLMyButtonElement>('my-button');

In the above case, MyButton actually was defined in Library A and not the Library B.

Is there a way to solve this?

[Arvind6353]

@fredcido Hi , Were you able to solve the above ?. I am facing the similar issue and do you have any suggestions or work around?

[fredcido]

HI @Arvind6353 , the solution that I came up with was to "ignore" the components coming from the Library A when generating the Reactjs bundle in the Library B by using the option excludeComponents:

In our stencil.config.ts

// Import the component docs from Library A
import { components } from 'library-a/dist/docs.json';
const webComponents = components.map((c) => c.tag);

...
outputTargets: [
...
reactOutputTarget({
      componentCorePackage: 'library-b',
      proxiesFile: './react-wrapper/src/components.ts',
      // Exclude those components from the wrapper
      excludeComponents: webComponents,
}),
]

[Arvind6353]

@fredcido Thank you.

Does your webcomponents support IE11 ?. The dist-custom-elements bundle does not provide pollyfills. By chance did u find a way to apply pollyfills for IE11 with react wrapper ?

[fredcido]

@Arvind6353 we don't actively support IE11, but we do include polyfills. There's an option in the react wrapper that you can pass to include the pollyfill line: includePolyfills: true, but also, you can always include in your docs that the consumers should first import the core package with the webcomponents, register the polyfills and then consume the react components.

[Arvind6353]

@fredcido the includePolyFills: true works only if we use dist outputTarget. Am trying to use dist-custom-elements outputTarget so that the consumer can benefit from tree shaking.

https://github.com/ionic-team/stencil-ds-output-targets#includepolyfills

[Arvind6353]

@fredcido Are u using dist outputTarget with lazy loading feature ?

[arvindanta]

@fredcido When i try to use the 2nd Stencil component which is dependent on the 1st component

Should I import both the react components ?.

If I import only the second component in React, the webcomponents in 1st stencil library component is not working.

import { FwButton1 } from "cr-mn-datatable/react";

FwButton1 component uses components from cr-mn-core.

Unless I use import "cr-mn-core/react";

components from cr-mn-core is not loading inside cr-mn-datatable/react component.

Did you face this issue ?

[arvindanta]

@fredcido Were u able to auto import dependent components with dist-custom-elements/dist-custom-elements-bundle?

[fredcido]

@arvindanta No, I have never tried that.

[Ruben-E]

@fredcido did you ever found a solution? Also affected by exactly the same issue

[fredcido]

Hey @Ruben-E , yes, I've ignored the components from one library when generating the output in another:

https://github.com/ionic-team/stencil-ds-output-targets/issues/131#issuecomment-922722491

[Ruben-E]

@fredcido Thanks for the quick reply! I see. Unfortunately that's not really what we're looking for. Hoped that there was a solution to export components from both libraries in the mean time.

Very weird that libraryB/src/components.d.ts only contains the local components while react/src/components.ts expects all components. Tried to re-export JSX and Components from libraryA and libraryB into one file, but no luck yet.

[janarvaez]

this works, but it's far from optimal.