TSLint Error: Argument of type 'SPHttpClientConfiguration' is not assign able to parameter of type 'SPHttpClientConfiguration'

Question

Unable to Build my SharePoint solution. When building, each of my webparts has the error

"Argument of type 'SPHttpClientConfiguration' is not assign able to parameter of type 'SPHttpClientConfiguration'."

all my sharepoint module imports are the same in all webparts:

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { Version, Environment, EnvironmentType } from '@microsoft/sp-core-library';
import {
   BaseClientSideWebPart,
   IPropertyPaneConfiguration,
   PropertyPaneTextField
} from '@microsoft/sp-webpart-base';

Package,json

  "dependencies": {
    "@microsoft/sp-core-library": "~1.3.0",
    "@microsoft/sp-http": "^1.3.0",
    "@microsoft/sp-webpart-base": "~1.3.0",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "sp-client-custom-fields": "^1.3.4"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.3.0",
    "@microsoft/sp-module-interfaces": "~1.3.0",
    "@microsoft/sp-webpart-workbench": "~1.3.0",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "gulp": "~3.9.1",
    "tslint": "^5.7.0",
    "url-loader": "^0.5.9"
  }

Tried removing node_modules and installing a few times and still experiencing the same issue.

Also Removed both sp-http and sp-client-custom-fields. and now I am getting the error.

Cannot find module '@microsoft/sp-http'

Already posted an issue on github and wanted to see if anyone else has experienced this problem

Heres the reported issue: https://github.com/SharePoint/sp-dev-docs/issues/911

thanks in advance.

Answer 1

You need to modify your import statement as below (probably not needed to modify your import statement but adding it for safer side):

import { SPHttpClient, SPHttpClientConfiguration, SPHttpClientResponse, 
ISPHttpClientConfiguration } from '@microsoft/sp-http';

And change your method as below. You need to change Response to SPHttpClientResponse. This is the correct way as the response will be in the type SPHttpClientResponse. JSON data will then be extracted from the response using the methods available.

private _getListData(): Promise<ISPLists> { 

    var queryUrl = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('${this.sharepointLists[this.prop‌​erties.SharepointLis‌​t] ? this.sharepointLists[this.properties.SharepointList].Title : 'DataAnalytics'}')/items?$orderby=csd_order asc";

    return this.context.spHttpClient.get(queryUrl, SPHttpClient.configurations.v1)
               .then((response: SPHttpClientResponse) => {
                        return response.json();
    });
}

Answer 2

For anyone still stuggling with this issue, the resolution for me was as follows:

npm uninstall @microsoft/sp-http

npm uninstall @microsoft/sp-application-base

npm install @microsoft/sp-application-base

I suspect there was a version incompatibility somewhere.