After upgrade to @stencil/react-output-target 0.0.7 render fails in react

[kevinng-staizen]

Hello,

After upgrading @stencil/react-output-target from 0.0.6 to 0.0.7 my stencil components are failing silently and failing to render in React.

Inspecting createComponent.tsx it seems this function has changed quite abit. Please help me by providing some guidance on this issue, thanks much for your time.

Expected: After upgrade from 0.0.6 to 0.0.7 stencil components render in React.

Actual: After upgrade to 0.0.7, stencil components fail to render with no error messages.

[Purii]

Fixed my build by setting the introduced options:

reactOutputTarget({
      componentCorePackage: "yourcorepackage",
      proxiesFile: "../proxiesFile.ts",
      includeDefineCustomElements: true,
     // includePolyfills: true // Enable if needed
 }),

[jdnichollsc]

@Purii what polyfills are included here? I can see an issue with the types for React, pointing to stencil package, is this dependency required now?

[Purii]

@jdnichollsc I assume these: https://stenciljs.com/docs/browser-support

[jdnichollsc]

Ohh perfect, thanks!

[edolix]

It would be awesome to have 0.0.8 out soon 🙏

[sentience]

0.0.9 is out, but this is still not fixed.

The includeDefineCustomElements and includePolyfills options are supposed to default to true, and indeed the code looks intended to do that:

https://github.com/ionic-team/stencil-ds-output-targets/blob/b6c0dab984ec1d2933c52a9a844bc7bd81b7586e/packages/react-output-target/src/plugin.ts#L26-L27

Unfortunately, the normalizeOutputTarget function containing that code is only called when validating the plugin's configuration:

https://github.com/ionic-team/stencil-ds-output-targets/blob/b6c0dab984ec1d2933c52a9a844bc7bd81b7586e/packages/react-output-target/src/plugin.ts#L10-L12

…not when actually generating the output:

https://github.com/ionic-team/stencil-ds-output-targets/blob/b6c0dab984ec1d2933c52a9a844bc7bd81b7586e/packages/react-output-target/src/plugin.ts#L13-L16

I think the fix would be:

  async generator(config, compilerCtx, buildCtx) { 
    const timespan = buildCtx.createTimeSpan(`generate react started`, true); 

    await reactProxyOutput(config, compilerCtx, normalizeOutputTarget(config, outputTarget), buildCtx.components); 

[ps011]

Tried to set includeDefineCustomElements to true and built the component-library. Getting a new error now in the consumer application where I am trying to use the component-library-react:

Can’t import the named export ‘a’ from non EcmaScript module (only default export is available)

Any solutions? I tried upgrading the version of typescript in the component-library-react package but no luck.

[sentience]

@ps011 I'm not seeing the same problem with includeDefineCustomElements (and includePolyfills) set to true.

If you're still stuck, I think you'll need to share a minimal repo demonstrating the issue.

[aeciolevy]

I am using version 0.0.9, and it does render unless I do the defineCustomElements() in the consumer application.

Even using the example project https://github.com/ionic-team/stencil-ds-output-targets/tree/master/packages/example-project in a create-react-app the component does not render. I tried adding the includeDefineCustomElements: true to the example project and still not rendering. It does render if I load the defineCustomElements from the core package and call it in the top-level file (index.js) of create-react-app.

[christian-bromann]

Closing as I believe this should be resolved with the latest version of @stencil/react-output-target. If this is still an issue, please let me know and I can re-open this.