Stencil: Stencil and React JSX definitions do not match

[alexlafroscia]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

If both @stencil/core and @types/react are installed in the same project (for example, in a mono-repo) then you can't compile your Stencil components.

Stencil provides a type definition for JSX.IntrinsicElements that looks something like this (partial copy of the offending file)

// node_modules/@stencil/core/dist/declarations/jsx.d.ts
....
};
declare global {
    namespace JSX {
        interface Element {
        }
        interface IntrinsicElements {
            slot: JSXElements.SlotAttributes;
            a: JSXElements.AnchorHTMLAttributes;

However, @types/react defines them differently:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f11a3342486e62b9f62a0fe54263a744bb5a34a0/types/react/index.d.ts#L2300

And you end up with a TypeScript compilation error.

Expected behavior:

I would expect the type definitions not to conflict.

Steps to reproduce:

I created a reproduction repo here:

https://github.com/alexlafroscia/__stencil-react-typescript-compatibility-bug

The instructions on getting it set up are included in the README of that repo.

Other information:

The TypeScript compilation error that I receive looks something like this:

Subsequent property declarations must have the same type. Property 'a' must be of type 'AnchorHTMLAttributes', but here has type 'DetailedHTMLProps, HTMLAnchorElement>'.

but 114 times, one for each type of element that does not match between the two definitions.

[jthoms1]

I am working on transitioning us to use Typescript 2.8 namespaced types for JSX. It appears that no one else is using but I have reached out to the team on how to implement.

[justusromijn]

@jthoms1 can this be related to #827 ? We currently have a problem with the typings causing errors when a (default) slot is used in a stencil component.

[alexlafroscia]

I actually discovered this problem when trying to put a reproduction together for #827, since it was closed and locked without a resolution 😅

[jthoms1]

It is a duplicate. I am working on a solution that should solve both and hopefully it will provide other JSX libs with a nice path to follow. 😄

[lassecapel]

I'm Experiencing the same issue implementing react component's as slotted content.

Type '{ children: Element; }' has no properties in common with type 'HbrPanelAttributes'.
@justusromijn #827 describes the issue indeed.

[alexlafroscia]

Sweet! Happy to hear that.

[jthoms1]

Ok so just published a prerelease of stencil. Hopefully this should resolve the type issues. If you have a component collection you are using in react go ahead and rebuild it with @stencil/[email protected].

This will remove all JSX from global for published packages. Which means it should work with React Typescript.

[alexlafroscia]

I tried upgrading in the demo repo I linked to originally. Things still don't quite work.

I got this error when trying to run yarn build:

$ stencil build
[52:30.0]  @stencil/core v0.12.0-1 🏕
[52:30.2]  build, mycomponent, prod mode, started ...
[52:30.2]  transpile started ...
[52:31.3]  transpile finished in 1.14 s
[52:31.3]  module map started ...
[52:31.3]  generate styles started ...
[52:31.5]  module map finished in 117 ms
[52:31.5]  generate styles finished in 143 ms
[52:31.5]  generate bundles started ...
[52:31.8]  generate bundles finished in 272 ms
[52:31.8]  generate app files started ...

[ ERROR ]  TypeScript: src/components.d.ts:45:21
           Interface 'IntrinsicElements' incorrectly extends interface 'DefaultIntrinsicElements'. Types of property
           'a' are incompatible. Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'
           is not assignable to type 'AnchorHTMLAttributes<HTMLAnchorElement>'. Types of property 'ref' are
           incompatible. Type 'Ref<HTMLAnchorElement>' is not assignable to type '(elm?: HTMLAnchorElement) => void'.
           Type 'string' is not assignable to type '(elm?: HTMLAnchorElement) => void'.

     L44:  export interface Element {}
     L45:  export interface IntrinsicElements extends LocalIntrinsicElements, DefaultIntrinsicElements {
     L46:    [tagName: string]: any;

[ ERROR ]  TypeScript: src/components/my-component/my-component.tsx:11:11
           Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

     L10:  return (
     L11:    <div class="bg-red">
     L12:      <slot />

[52:34.1]  build failed in 3.91 s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have pushed the update to that repo, so you should be able to pull it and reproduce what I'm seeing for yourself.

I also double-checked and made sure that I'm using the latest TypeScript, @types/react and @types/react-dom versions, updated them, and am still seeing the issue. Additionally, I flushed my node_modules for the project but that also did not help.

[jthoms1]

@alexlafroscia Is there a repo I can troubleshoot?

[alexlafroscia]

I linked to this one in the original issue:

https://github.com/alexlafroscia/__stencil-react-typescript-compatibility-bug

I need to update it to the latest Stencil release to verify the problem still exists, though.

[jthoms1]

Cool, If it still does let me know and I will clone your repo and try to troubleshoot.

[alexlafroscia]

Okay, still a problem.

I went ahead and upgraded the React app in my example repo to all the latest stuff; latest React, @types/react, TypeScript, etc.

I then went and upgrade Stencil to 0.12.4.

Something is still incompatible with their TypeScript definitions:

Updates pushed to the repo linked above.

[jthoms1]

Ok I will git it a try tomorrow. Thank you!

[hartjus]

This is becoming a blocker for us, not being able to upgrade our stencil version and react (@types/react). Look forward to a fix!

[jthoms1]

Found the issue. Because this is a monorepo Typescript is including all types. If you had the 2 packages in different repos it would not be an issue. So to get around this you need to specify typescript compiler options explicitly.

So the fix for @alexlafroscia is to add the following under compilerOptions

types: []

Here is more detail on the change.
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types