Upgrading a spfx project from Yeoman 1.3.4 to 1.4.0 causes code notto compile

Highlighted
Regular Contributor

Hi

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 ahs gone from working to not working :-

 

private _showAlert(): void {
const alert: React.ReactElement<IAlertProps> = React.createElement(
Alert,
{
message: strings.CustomSearchPlaceholderModeOnAlert
}
);
ReactDom.render(alert, this.domElement);
}
 
[ts]
Argument of type 'typeof Alert' is not assignable to parameter of type 'string | ComponentClass<IAlertProps> | StatelessComponent<IAlertProps>'.
Type 'typeof Alert' is not assignable to type 'StatelessComponent<IAlertProps>'.
Type 'typeof Alert' provides no match for the signature '(props: IAlertProps & { children?: ReactNode; }, context?: any): ReactElement<any>'.
import Alert
 
Anybody any ideas ?
 
Regards
 
Nigel
3 Replies
Highlighted
hey, nigel.
this worked for me:
create a new 1.4 projects
copy all the sp-* and react items from the new 1.4 project to my project.
delete node_modules
install @types/es6-collections
npm i


i'm sure i missed a few steps in there
Highlighted

Hi Russell

 

I followed your steps below but copied everything from directory src across rather than your line "copy all of the sp-* and react items.

 

It still failed about Alert "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<IAlertProps> | StatelessComponent<IAlertProps>'."

 

Nigel

Highlighted

Hi Russell

 

i have just re-read your response.

it looks as if you create the 1.4.0 project and then copy the bits you want from the newly created project to your existing project.

 

is that correct ?

 

Regards

 

Nigel