Repository navigation
bug(jsx): Fragment and Host return types are incorrect, causing TypeScript errors #5311
Closed as not planned
Description
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.12.0
Current Behavior
After #5306 is resolved, typescript is able to correctly resolve JSX.Element type (before that, it's implicitly any)
That uncovers another error in the typings - Fragment and Host are typed as returning VNode | VNode[], but should return VNode
This manifests as the following TypeScript errors:
'Host' cannot be used as a JSX component.
Its return type 'VNode | VNode[]' is not a valid JSX element.ts(2786)
/// and:
'Fragment' cannot be used as a JSX component.
Its return type 'VNode | VNode[]' is not a valid JSX element.
Type 'VNode[]' is missing the following properties from type 'VNode': $flags$, $tag$, $elm$, $text$, $children$ts(2786)Expected Behavior
The return type should be VNode to resolve the errors
System Info
System: node 20.11.0
Platform: darwin (23.2.0)
CPU Model: Apple M1 Pro (10 cpus)
Compiler: /Users/mak13180/site/esri/arcgis-web-components/node_modules/@stencil/core/compiler/stencil.js
Build: 1705333241
Stencil: 4.10.0 🍪
TypeScript: 5.3.3
Rollup: 2.42.3
Parse5: 7.1.2
jQuery: 4.0.0-pre
Terser: 5.26.0Steps to Reproduce
- Open this code
- See the TypeScript error
- See that changing
FragmentandHostreturn type toVNodefixes the issues
Code Reproduction URL
Additional Information
Related issue: #5306
Activity
rwaskiewicz commentedon Feb 1, 2024
Hey @maxpatiiuk 👋
Thanks for the second issue! Would it be possible to give us a reproduction case that doesn't use the TS ESLint playground? It makes it a bit difficult to evaluate the changes proposed in #5307.
ionitron-bot commentedon Feb 1, 2024
Thanks for the issue! This issue has been labeled as
needs reproduction. This label is added to issues that need a code reproduction.Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
maxpatiiuk commentedon Feb 1, 2024
That TS ESLint playground is sufficient to reproduce the issue, and it shows the internals of TypeScript compiler with additional information.
Still, if you prefer a stencil repository, here is a reproduction case: https://github.com/maxpatiiuk/stencil-issue-5311-reproduction
rwaskiewicz commentedon Feb 1, 2024
Hey @maxpatiiuk,
I'm unable to reproduce this issue based on the instructions you've provided.
To be clear, I'm asking for a reproduction case so that we can evaluate the changes you made in #5307 with the actual Stencil compiler, rather than something that replicates it in a playground. This is why I asked for a reproduction case - I'm unable to compile Stencil and get it "into" the ESBuild playground.
As a part of that evaluation, I'm looking to replicate the error in the reproduction case you provided. From the instructions you've provided, it looks like you're asking me to look at
src/declarations.d.ts, but it's unclear how I can replicate these errors in the first place. It's unclear to me if this is:While I think it's the first option based on the context of this issue, I'd greatly appreciate it if you can provide step by step instructions here for the team to be able to take a look.
Thanks!
maxpatiiuk commentedon Feb 1, 2024
See the updated README with detailed steps for both issues: https://github.com/maxpatiiuk/stencil-issue-5311-reproduction#readme
I am able to reproduce issues the ESLint and TypeScript issue both in the command line and in VS Code on a fresh clone of that repository
rwaskiewicz commentedon Feb 2, 2024
Thanks! I've merged this into #5306 now that I understand the problem space a bit better. Per my comment here I'm going to close this out.