I have tried to upgrade a SPFx project from Yeoman 1.3.4 to 1.4.0 as a result of this React is upgraded from version 14 to version 15.6.
As a result my code has gone from working to not working :-
private _showAlert(): void { const alert: React.ReactElement = React.createElement( Alert, { message: strings.CustomSearchPlaceholderModeOnAlert } ); ReactDom.render(alert, this.domElement); }
Error :- [ts] Argument of type ‘typeof Alert’ is not assignable to parameter of type ‘string | ComponentClass | StatelessComponent’. Type ‘typeof Alert’ is not assignable to type ‘StatelessComponent’. Type ‘typeof Alert’ provides no match for the signature ‘(props: IAlertProps & { children?: ReactNode; }, context?: any): ReactElement’. import Alert
This is what came out of gulp serve :-
Error – typescript – src\webparts\reactSearchBox\ReactSearchBoxWebPart.ts(129,6): error TS2345: Argument of type ‘typeof Alert’ is not assignable to parameter of type ‘string | ComponentClass | StatelessComponent’.
IAlertProps :+
export interface IAlertProps { /** * Message to be rendered in h1. */ message: string; }
Alert :-
import * as React from 'react'; import { IAlertProps } from './IAlertProps'; declare const window: any; /** * Simple react component that shows h1 element with text. */ export default class Alert extends React.Component<IAlertProps, void> { public render(): React.ReactElement<IAlertProps> { return ( <h1>{this.props.message}</h1> ); } }
Any Ideas anyone ?