Skip to main content

How to upgrade typescript version in a SPFX solution


Why do we need to upgrade typescript version in a SPFX solution?

As part of SPFX development we try to install 3rd party libraries, there is a possibility that we might face type errors. For example, if we try to install ANTD package as part of your solution and use one of its components and try to build the solution. You might be seeing the type errors (TS1005,TS1109) as shown below.

Typescript errors

How to find out the typescript version?

When you build (Gulp build) the SPFX solution you will be able to find out the typescript version from the build log as shown below. 



Steps for updating the Typescript version.

In SPFX solution typescript version has dependency on the @Microsoft/rush-stack-compiler package version.  In the package.json if you have @microsoft/rush-stack-compiler-2.7 then the typescript version is 2.7.x. 

  1.  In the SPFX solution deleted the node_modules folder. It will remove all the packages that are installed. 
  2. On the package.json under the dev dependencies remove the @microsoft/rush-stack-compiler-2.7 entry and update it with @microsoft/rush-stack-compiler-3.3 with version 0.1.7.
           


      3.   Open the tsconfig.json file and update the extends attribute with the latest rush stack compiler version. 
            

             4.  Do a npm install to install all the packages. 

     Now when you try to do a gulp build you will be able to see that the typescript version is updated to 3.3 version. 

     Reference:- https://sympmarc.com/2019/03/15/common-issues-in-spfx-1-8-0-with-typescript-3-3/

















Labels:

Comments

Post a Comment

Popular posts from this blog

Add Items to sharepoint online List using powershell!!

SharePoint online provides only a small set of basic commands for writing powershell scripts. IF we have to do any operation using powershell we need to use CSOM or REST API.   Sharepoint patterns and Practises (PnP) team came with a powershell module for doing operation on the sharepoint online. Its very help full while writing scripts.   Similar modules exists for Sharepoint 2013 and Sharepoint 2016.   Link to the Github respositry. In the below article I will try to add items to a list picking the data from the JSON file.           Try to check whether SharepointPNPPowershellOnline module was installed or not. If not install it. # This script adds items to the list picking up the data from the json file. if (-not (Get-Module -ListAvailable -Name SharePointPnPPowerShellOnline)) { Install-Module SharePointPnPPowerShellOnline }           Get the data from the json file and store it in a va...
Post a Comment
Read more

Use of Expression in Microsoft flow through an example

Most of the basic flows can be configured using the templates provided by Microsoft. But in real time we will be developing flows which have complexity. Expression play an important role in fulfilling the requirements. Scenario : -  We have project details list which has the below columns, we need to intimate the project team before 2 days of the end date. (Please note that this scenario is picked up from one of the Microsoft insight demo) The following points needs to be implemented ·          Only title and End time are mandatory fields, Start time if not entered needs to be taken as the current date. ·          Number of days is the difference between the start time and end time.   ·          Email needs to be sent before 2 days of the end date. ·          If any attachments they nee...
Post a Comment
Read more