-
Notifications
You must be signed in to change notification settings - Fork 12.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TSX and React Context API broke on nightly #27948
Comments
Another example with same error: import React from "react";
declare const Comp: React.SFC | React.ComponentClass;
<Comp /> |
Righto, with #27627 we removed the ability JSX tags had to attempt to resolve multiple call or construct signatures using the same expressions (and this was intentional because this is very unsafe, since we annotate types on those expressions during contextual checking). We need #7294 as a general solution to solve the problem for all kinds of calls (although JSX throws an extra wrench in that bucket by having methods of resolving both constructors and functions at the same time). Right now a |
How to express HOC for both SFC and Component class now? export function HOC(WrappedComponent: React.ComponentType) {
// error
<WrappedComponent />
}
declare function HOC1(WrappedComponent: React.SFC);
declare function HOC2(WrappedComponent: React.ComponentClass);
HOC1(A);
// NON-SFC are not accepted
HOC1(B);
// SFC are not accepted
HOC2(A)
HOC2(B); Edit: Looks like adding overload signature works |
import React from "react";
declare const Comp: React.SFC | React.ComponentClass;
<Comp /> Yes, we explicitly removed the code that allowed that to function in #27627 as what that codepath was doing was unstable in the presence of contextually typed attributes (ie, function children or attributes with untyped parameters). We're looking into fixing #7294 in a more general, safer way as a replacement. |
(So yes, it's broken right now, yes, we know, and yes, we'd like to fix it, however the break was intentional to fix a mountain of other problems caused by the hackish way it was accomplished.) |
I get the same error ("JSX element type 'React.Fragment' does not have any construct or call signatures") for the following code. import * as React from "react";
const fragment = (
<React.Fragment key={42}>
<div>a</div>
<div>b</div>
</React.Fragment>
); Does this mean that the declaration for The current (Definitly Typed) declaration is as follows. const Fragment: ComponentType;
type ComponentType<P = {}> = ComponentClass<P> | StatelessComponent<P>; |
@ulrichb Yep, |
@brieb Thanks! |
Since I was adding a special SFC type definition for However, I'm not sure how... feasible it is to just make type WorksTodayHOC<P> = (Component: React.ComponentType<P>) => React.SFC<P>;
const AHoc: WorksTodayHOC<{}> = Component => props => <Component {...props}/>;
type BrokenInNextTooHOC<P> = {
// trips tslint rule, "should be" React.Component<P> | React.SFC<P>
(Component: React.Component<P>): React.SFC<P>
(Component: React.SFC<P>): React.SFC<P>
};
// RHS doesn't get inferred so Component and props are implicit anys
const BHoc: BrokenInNextTooHOC<{}> = Component => props => <Component {...props}/>; |
Just authoring a solution that feels as little like a react/jsx-specific hack as possible, so it's taking a bit. We actually have a laundry list of issues to do with calling unions of types with signatures, so I've been looking at fixing it in the context of fixing those at the same time. |
(I do personally like the exotic component change, tho (I feel like it lies a bit less) - ideally we wouldn't use the call signature at all and there could just but a factory function overload that works over exotic components; but we're not there yet) |
With the advent of ref forwarding, it's also becoming more useful to have access to the actual type of the input component, so the ideal generic would actually be |
Today's nightly aughta fix all the common cases of this (like |
Also seeing this in |
@calebeby I just opened a PR (#28557) that reenables some patterns like that, but not for the pair |
TypeScript Version: 3.2.0-dev.20181017
Search Terms: react, tsx, jsx, construct, call signatures.
Code
Expected behavior:
Works as in 3.1.3
Actual behavior:
Giving
JSX element type 'Context.Provider' does not have any construct or call signatures.
The text was updated successfully, but these errors were encountered: