bug: Getting compile time error with generated react output from Stencil Component

[ranjanakash166]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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

[ionitron-bot]

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

[artursopelnik]

+1

JSX.IntrinsicElements errors seem to be a known and recurring bug.

• Can't use a Stencil library from a React + TS application stencil#1636
• JSX.IntrinsicElements error with typescript and react stencil#1090