Skip to content

How to upgrade react-output-target from 0.5.x to 0.7.x #548

Open
@kurtinatlanta

Description

@kurtinatlanta

Prerequisites

Stencil Version

4.20

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.5.3

Current Behavior

I am able to use the output of a Stencil build that produces lazy-loading custom elements, via the dist output target, with version 0.5.3 of the react-output-target.

My understanding of how the latest react-output-target works is that it requires the use of the statically linked custom elements generated with the dist-custom-elements output target.

Expected Behavior

The lazy-loadable custom elements can still be wrapped for use in a React app using the dist output target or deeper documentation on how to continue to use the lazy-loadable custom elements at runtime. Or, deeper documentation on how to convert from one to the other without creating version mismatches across various builds of the custom elements.

For example, currently, the generated React wrappers only change when a custom element class is created or deleted from the library. We can build and deploy many versions (builds) of the Stencil-based custom elements without having to rebuild the React wrappers, or the apps that use the wrappers.

Steps to Reproduce

Start with a Stencil library that also generates React wrappers using version 0.5.x of the react-output-target along with the dist output target. Successfully build and wrap the components.

Upgrade to the latest react-output-target. The build will fail as it requires the use of the dist-custom-elements target, which will then generate code that imports the custom element classes instead of just their types.

Code Reproduction URL

https://no.url

Additional Information

My speculation is that this change was made in order to support server-side rendering, which would need the custom element available at render time on the server. This is a good goal, but it should not come at the cost of forcing applications that are not using server-side rendering, and want/need the lazy-loaded custom element to still have React wrappers available, to completely redo those applications or figure out how to reinvent the wrapping process.

I brought this up in the Ionic discord and @christian-bromann asked that I submit an issue here.

Metadata

Metadata

Labels

type: bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions