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

Sharepoint 2013 REST API limitations with site columns

Recently i attended an interview for one of the company, the interviewer asked me a question on rest api. How to get a publishing image field using rest api? I answered its the normal way how we get the other fields. But later i came to know that its the wrong answer. After some research on Google came to know that there some limitations to rest api in sharepoint 2013. Below is a list of columns available using Rest api. Column Support Notes Hyperlink or Picture Supported Single Line of Text Supported Multiple lines of text :: Plaintext Supported Multiple lines of text :: Richtext Supported Returns unencoded XHTML Multiple lines of text :: Enhanced Richtext Supported Returns unencoded XHTML Choice Supported Column is required in the  $expand  keyword Counter Supported Integer Supported Number Supported Currency Supported Date Supported Returns an ISO 8601 date e.g. 2013-03-08T11:00:00 Yes/No Supported Returns true or false string literals Person or Group Suppo...
1 comment
Read more

Microsoft Graph API and SharePoint

While developing solutions for office 365 Microsoft graph API will help you in achieving the required output. In my previous project where I have used Graph API, I found it difficult for getting info on some of the endpoints. Below I will try to list out some of the basic and most used end points of Microsoft graph API for SharePoint. Getting site level information Searching for Sites https://graph.microsoft.com/v1.0/sites?search=* it returns the list of site collections the user have permission. Site details based on the relative path https://graph.microsoft.com/v1.0/sites/{host-name}:/{server-relative-path} if the site collection url is https://contoso.sharepoint.com/sites/test1 Host-name:- contoso.sharepoint.com Server relative path:- sites/test1 Graph Url:- https://graph.microsoft.com/v1.0/sites/contoso.sharepoint.com:/sites/test1 Different ways to get list data Get the list data for a root site https://graph.microsoft.com/v1.0/sites/root/...
Post a Comment
Read more