In ReactSpa, use isomorphic-fetch for IE/Edge compatibility

templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts

@@ -1,5 +1,5 @@
 import * as ko from 'knockout';
-import * as fetch from 'isomorphic-fetch';
+import 'isomorphic-fetch';
 
 interface WeatherForecast {
     dateFormatted: string;

templates/ReactSpa/ClientApp/components/FetchData.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import 'isomorphic-fetch';
 
 interface FetchDataExampleState {
     forecasts: WeatherForecast[];

templates/ReactSpa/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "babel-core": "^6.5.2",
+    "isomorphic-fetch": "^2.2.1",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-router": "^2.1.1"

templates/ReactSpa/tsd.json

@@ -17,8 +17,8 @@
     "react-router/history.d.ts": {
       "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
     },
-    "whatwg-fetch/whatwg-fetch.d.ts": {
-      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
+    "isomorphic-fetch/isomorphic-fetch.d.ts": {
+      "commit": "57ec5fbb76060329c10959d449eb1d4e70b15a65"
     }
   }
 }

templates/ReactSpa/typings/isomorphic-fetch/isomorphic-fetch.d.ts

@@ -0,0 +1,119 @@
+// Type definitions for isomorphic-fetch
+// Project: https://github.com/matthew-andrews/isomorphic-fetch
+// Definitions by: Todd Lucas <https://github.com/toddlucas>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare enum RequestContext {
+    "audio", "beacon", "cspreport", "download", "embed", "eventsource",
+    "favicon", "fetch", "font", "form", "frame", "hyperlink", "iframe",
+    "image", "imageset", "import", "internal", "location", "manifest",
+    "object", "ping", "plugin", "prefetch", "script", "serviceworker",
+    "sharedworker", "subresource", "style", "track", "video", "worker",
+    "xmlhttprequest", "xslt"
+}
+declare enum RequestMode { "same-origin", "no-cors", "cors" }
+declare enum RequestCredentials { "omit", "same-origin", "include" }
+declare enum RequestCache {
+    "default", "no-store", "reload", "no-cache", "force-cache",
+    "only-if-cached"
+}
+declare enum ResponseType { "basic", "cors", "default", "error", "opaque" }
+
+declare type HeaderInit = Headers | Array<string>;
+declare type BodyInit = ArrayBuffer | ArrayBufferView | Blob | FormData | string;
+declare type RequestInfo = Request | string;
+
+interface RequestInit {
+    method?: string;
+    headers?: HeaderInit | { [index: string]: string };
+    body?: BodyInit;
+    mode?: string | RequestMode;
+    credentials?: string | RequestCredentials;
+    cache?: string | RequestCache;
+}
+
+interface IHeaders {
+    get(name: string): string;
+    getAll(name: string): Array<string>;
+    has(name: string): boolean;
+}
+
+declare class Headers implements IHeaders {
+    append(name: string, value: string): void;
+    delete(name: string):void;
+    get(name: string): string;
+    getAll(name: string): Array<string>;
+    has(name: string): boolean;
+    set(name: string, value: string): void;
+}
+
+interface IBody {
+    bodyUsed: boolean;
+    arrayBuffer(): Promise<ArrayBuffer>;
+    blob(): Promise<Blob>;
+    formData(): Promise<FormData>;
+    json(): Promise<any>;
+    json<T>(): Promise<T>;
+    text(): Promise<string>;
+}
+
+declare class Body implements IBody {
+    bodyUsed: boolean;
+    arrayBuffer(): Promise<ArrayBuffer>;
+    blob(): Promise<Blob>;
+    formData(): Promise<FormData>;
+    json(): Promise<any>;
+    json<T>(): Promise<T>;
+    text(): Promise<string>;
+}
+
+interface IRequest extends IBody {
+    method: string;
+    url: string;
+    headers: Headers;
+    context: string | RequestContext;
+    referrer: string;
+    mode: string | RequestMode;
+    credentials: string | RequestCredentials;
+    cache: string | RequestCache;
+}
+
+declare class Request extends Body implements IRequest {
+    constructor(input: string | Request, init?: RequestInit);
+    method: string;
+    url: string;
+    headers: Headers;
+    context: string | RequestContext;
+    referrer: string;
+    mode: string | RequestMode;
+    credentials: string | RequestCredentials;
+    cache: string | RequestCache;
+}
+
+interface IResponse extends IBody {
+    url: string;
+    status: number;
+    statusText: string;
+    ok: boolean;
+    headers: IHeaders;
+    type: string | ResponseType;
+    size: number;
+    timeout: number;
+    redirect(url: string, status: number): IResponse;
+    error(): IResponse;
+    clone(): IResponse;
+}
+
+interface IFetchStatic {
+    Promise: any;
+    Headers: IHeaders
+    Request: IRequest;
+    Response: IResponse;
+    (url: string | IRequest, init?: RequestInit): Promise<IResponse>;
+}
+
+declare var fetch: IFetchStatic;
+
+declare module "isomorphic-fetch" {
+    export = fetch;
+}

templates/ReactSpa/typings/tsd.d.ts

@@ -3,4 +3,4 @@
 /// <reference path="react-router/history.d.ts" />
 /// <reference path="react-router/react-router.d.ts" />
 /// <reference path="react/react-dom.d.ts" />
-/// <reference path="whatwg-fetch/whatwg-fetch.d.ts" />
+/// <reference path="isomorphic-fetch/isomorphic-fetch.d.ts" />

templates/ReactSpa/typings/whatwg-fetch/whatwg-fetch.d.ts

@@ -1,85 +0,0 @@
-// Type definitions for fetch API
-// Project: https://github.com/github/fetch
-// Definitions by: Ryan Graham <https://github.com/ryan-codingintrigue>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-declare class Request extends Body {
-	constructor(input: string|Request, init?:RequestInit);
-	method: string;
-	url: string;
-	headers: Headers;
-	context: string|RequestContext;
-	referrer: string;
-	mode: string|RequestMode;
-	credentials: string|RequestCredentials;
-	cache: string|RequestCache;
-}
-
-interface RequestInit {
-	method?: string;
-	headers?: HeaderInit|{ [index: string]: string };
-	body?: BodyInit;
-	mode?: string|RequestMode;
-	credentials?: string|RequestCredentials;
-	cache?: string|RequestCache;
-}
-
-declare enum RequestContext {
-	"audio", "beacon", "cspreport", "download", "embed", "eventsource", "favicon", "fetch",
-	"font", "form", "frame", "hyperlink", "iframe", "image", "imageset", "import",
-	"internal", "location", "manifest", "object", "ping", "plugin", "prefetch", "script",
-	"serviceworker", "sharedworker", "subresource", "style", "track", "video", "worker",
-	"xmlhttprequest", "xslt"
-}
-declare enum RequestMode { "same-origin", "no-cors", "cors" }
-declare enum RequestCredentials { "omit", "same-origin", "include" }
-declare enum RequestCache { "default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached" }
-
-declare class Headers {
-	append(name: string, value: string): void;
-	delete(name: string):void;
-	get(name: string): string;
-	getAll(name: string): Array<string>;
-	has(name: string): boolean;
-	set(name: string, value: string): void;
-}
-
-declare class Body {
-	bodyUsed: boolean;
-	arrayBuffer(): Promise<ArrayBuffer>;
-	blob(): Promise<Blob>;
-	formData(): Promise<FormData>;
-	json(): Promise<any>;
-	json<T>(): Promise<T>;
-	text(): Promise<string>;
-}
-declare class Response extends Body {
-	constructor(body?: BodyInit, init?: ResponseInit);
-	error(): Response;
-	redirect(url: string, status: number): Response;
-	type: string|ResponseType;
-	url: string;
-	status: number;
-	ok: boolean;
-	statusText: string;
-	headers: Headers;
-	clone(): Response;
-}
-
-declare enum ResponseType { "basic", "cors", "default", "error", "opaque" }
-
-interface ResponseInit {
-	status: number;
-	statusText?: string;
-	headers?: HeaderInit;
-}
-
-declare type HeaderInit = Headers|Array<string>;
-declare type BodyInit = Blob|FormData|string;
-declare type RequestInfo = Request|string;
-
-interface Window {
-	fetch(url: string|Request, init?: RequestInit): Promise<Response>;
-}
-
-declare var fetch: typeof window.fetch;

templates/ReactSpa/webpack.config.vendor.js

@@ -15,7 +15,7 @@ module.exports = {
         ]
     },
     entry: {
-        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'],
+        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'],
     },
     output: {
         path: path.join(__dirname, 'wwwroot', 'dist'),