bug: cannot be used as a JSX component

[masoudjapalaghi]

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.22.3

Stencil Framework Output Target

React

Stencil Framework Output Target Version

^0.8.2

Current Behavior

'MyComponent' cannot be used as a JSX component.
Its type 'StencilReactComponent<MyComponent, MyComponentEvents>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<Omit<HTMLAttributes, keyof MyComponentEvents | "age" | "favoriteKidName" | "first" | "kidsNames" | "last" | "middle"> & EventListeners<...> & Partial<...> & RefAttributes<...>>' is not assignable to type '(props: any) => ReactNode | Promise'.
Type 'ReactNode' is not assignable to type 'ReactNode | Promise'.
Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode | Promise'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(387, 9): 'children' is declared here.

Expected Behavior

Fix error to perform build

The exact same config without hydrate is working correctly on react.

Steps to Reproduce

reactOutputTarget({
stencilPackageName: "..",
customElementsDir: "web-components",
outDir: "../../packages/component-library/react",
}),//worked

reactOutputTarget({
stencilPackageName: "..",
customElementsDir: "web-components",
outDir: "../../packages/component-library/next",
hydrateModule: "../hydrate",
}),//thrrow error

{
type: "dist-custom-elements",
externalRuntime: false,
dir: "../../packages/component-library/web-components",
},
{
type: "dist-hydrate-script",
dir: "../../packages/component-library/hydrate",
},

error: 'MyComponent' cannot be used as a JSX component.
Its type 'StencilReactComponent<MyComponent, MyComponentEvents>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<Omit<HTMLAttributes, keyof MyComponentEvents | "age" | "favoriteKidName" | "first" | "kidsNames" | "last" | "middle"> & EventListeners<...> & Partial<...> & RefAttributes<...>>' is not assignable to type '(props: any) => ReactNode | Promise'.
Type 'ReactNode' is not assignable to type 'ReactNode | Promise'.
Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode | Promise'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(387, 9): 'children' is declared here.

Code Reproduction URL

Additional Information

No response

[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

[masoudjapalaghi]

Title: Stencil Component Cannot Be Used as a JSX Component in Next.js

Description:
I am trying to use a Stencil Web Component inside a Next.js (TypeScript) project, but I am encountering the following error when using the component in JSX:

'MyButton' cannot be used as a JSX component. Its type 'StencilReactComponent<MyButton, MyButtonEvents>' is not a valid JSX element type. Type 'ForwardRefExoticComponent<Omit<HTMLAttributes<MyButton>, "fill" | "rel" | "color" | keyof MyButtonEvents | "buttonType" | "disabled" | "download" | "expand" | ... 6 more ... | "type"> & EventListeners<...> & Partial<...> & RefAttributes<...>>' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'. Type 'ReactNode' is not assignable to type 'ReactNode | Promise<ReactNode>'. Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode | Promise<ReactNode>'. Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'. I found that changing the jsx compiler option in tsconfig.json from:

"jsx": "preserve"
to

"jsx": "react-jsx"
fixes the issue. However, Next.js automatically resets this value to preserve when running npm run start, displaying this message:

Linting and checking validity of types ..
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
The following mandatory changes were made to your tsconfig.json:

- jsx was set to preserve (next.js implements its own optimized jsx transform)

This creates a conflict where Next.js forces jsx: "preserve", but Stencil components require jsx: "react-jsx" to work properly.

Steps to Reproduce:
Create a Next.js project with TypeScript.
Add a Stencil Web Component (e.g., MyButton).
Try to use the component in a React page.
Observe the TypeScript error.
Modify tsconfig.json to "jsx": "react-jsx", which fixes the issue.
Run npm run start, and Next.js resets jsx to preserve, causing the issue again.
Expected Behavior:
Stencil Web Components should work in Next.js without requiring manual modifications that Next.js forcibly resets.

Actual Behavior:
Next.js enforces "jsx": "preserve", which prevents Stencil components from being recognized as valid JSX components.

Possible Solutions:
Stencil's React bindings should support "jsx": "preserve" in Next.js.
Provide an official workaround or documentation on how to use Stencil components in Next.js.
Introduce an option in Stencil's React wrapper to ensure compatibility with Next.js's JSX transformation.
Is there a recommended way to use Stencil Web Components in Next.js without these conflicts?

[ionitron-bot]

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!