Open ranjanakash166 opened 1 month ago
Thanks for the issue!
This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README
+1
JSX.IntrinsicElements errors seem to be a known and recurring bug.
This issue has been labeled as help wanted
. This label is added to issues that we believe would be good for contributors.
If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort. Thank you!
+1 our current stencilJS component library build breaks with this error too. Seems like a breaking api change that should have been gated for the 5.0 release.
+1. I upgraded Stencil to 4.22 (from 4.15) and got this. My react output target package was way behind, so I updated it and no change. Does anyone know where/when the breakage occurred? Are Stencil projects who use the react output target essentially stuck on a specific version because of this?
Prerequisites
Stencil Version
4.20.0
Stencil Framework Output Target
React
Stencil Framework Output Target Version
0.5.3
Current Behavior
when generated react output from Stencil is compiled then we get an error
Implementation: import { Config } from '@stencil/core'; import { reactOutputTarget } from '@stencil/react-output-target';
export const config: Config = { namespace: 'demo', { type: 'dist-hydrate-script' }, outputTargets: [ reactOutputTarget({ componentCorePackage: pkg. name, proxiesFile: '../packages/react-components/src/components.ts', includeDefineCustomElements: true, }), { type: 'dist', esmLoaderPath: '../loader', }, ], };
Error: src/react-component-lib/createOverlayComponent.tsx(140,13): error TS2322: Type 'PropsWithoutRef & { forwardedRef: ForwardedRef; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Type 'PropsWithoutRef & { forwardedRef: ForwardedRef; }' is not assignable to type 'Readonly'.
src/react-component-lib/utils/index.tsx(40,27): error TS2345: Argument of type '{ (props: StencilReactExternalProps<PropType, ElementType>, ref: StencilReactForwardedRef): React.JSX.Element; displayName: string; }' is not assignable to parameter of type 'ForwardRefRenderFunction<ElementType, PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>>>'.
Types of parameters 'props' and 'props' are incompatible. Type 'PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>>' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'. Type 'Omit<HTMLAttributes, "style"> & StyleReactProps' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
Type 'Omit<HTMLAttributes, "style"> & StyleReactProps' is not assignable to type 'PropType'.
PropType' could be instantiated with an arbitrary type which could be unrelated to 'Omit<HTMLAttributes, "style"> & StyleReactProps'.
Expected Behavior
There should not be any compile time error when generated react (typescript) code is compiled
Steps to Reproduce
The generated wrapper for React generated from @stencil/react-output-target is giving compile time error while compiling in typescript
Code Reproduction URL
https://codesandbox.io/p/devbox/stencil-example-forked-m77dwl?workspaceId=64835305-1189-4848-9da8-81051e0ecc3d
Additional Information
Trying to create exact scenario as codebase the typescript version tried so far are 4.9.5 and 5.4.2