Fix react/redux TypeScript build errors caused by breaking changes in dependencies. Fixes #529, #582, #583

Author: SteveSandersonMS

samples/react/MusicStore/ReactApp/configureStore.ts

@@ -1,4 +1,4 @@
-import { createStore, applyMiddleware, compose, combineReducers, GenericStoreEnhancer } from 'redux';
+import { createStore, applyMiddleware, compose, combineReducers, GenericStoreEnhancer, Store as ReduxStore } from 'redux';
 import thunk from 'redux-thunk';
 import { routerReducer } from 'react-router-redux';
 import * as Store from './store';
@@ -16,7 +16,7 @@ export default function configureStore(initialState?: Store.ApplicationState) {
 
     // Combine all reducers and instantiate the app-wide store instance
     const allReducers = buildRootReducer(Store.reducers);
-    const store = createStoreWithMiddleware(allReducers, initialState) as Redux.Store<Store.ApplicationState>;
+    const store = createStoreWithMiddleware(allReducers, initialState) as ReduxStore<Store.ApplicationState>;
 
     // Enable Webpack hot module replacement for reducers
     if (module.hot) {

samples/react/MusicStore/package.json

@@ -2,6 +2,7 @@
   "name": "music-store",
   "version": "0.0.0",
   "dependencies": {
+    "@types/history": "^2.0.0",
     "@types/react": "^0.14.29",
     "@types/react-bootstrap": "^0.0.35",
     "@types/react-dom": "^0.14.14",
@@ -41,7 +42,7 @@
     "redux-typed": "^2.0.0",
     "style-loader": "^0.13.0",
     "ts-loader": "^0.8.1",
-    "typescript": "2.0.3",
+    "typescript": "^2.0.3",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-hot-middleware": "^2.12.2",

samples/react/MusicStore/tsconfig.json

@@ -1,11 +1,19 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "moduleResolution": "node",
     "target": "es6",
     "jsx": "preserve",
     "sourceMap": true,
     "experimentalDecorators": true,
-    "types": [ "webpack-env", "whatwg-fetch" ]
+    "types": [ "webpack-env", "whatwg-fetch" ],
+    "paths": {
+      // Fix "Duplicate identifier" errors caused by multiple dependencies fetching their own copies of type definitions.
+      // We tell TypeScript which type definitions module to treat as the canonical one (instead of combining all of them).
+      "history": ["./node_modules/@types/history/index"],
+      "redux": ["./node_modules/@types/redux/index"],
+      "react": ["./node_modules/@types/react/index"]
+    }
   },
   "exclude": [
       "node_modules"

templates/ReactReduxSpa/package.json

@@ -2,6 +2,7 @@
   "name": "WebApplicationBasic",
   "version": "0.0.0",
   "dependencies": {
+    "@types/history": "^2.0.0",
     "@types/react": "^0.14.29",
     "@types/react-dom": "^0.14.14",
     "@types/react-redux": "^4.4.29",
@@ -39,7 +40,7 @@
     "redux-thunk": "^2.1.0",
     "style-loader": "^0.13.0",
     "ts-loader": "^0.8.1",
-    "typescript": "2.0.3",
+    "typescript": "^2.0.3",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-hot-middleware": "^2.12.2",

templates/ReactReduxSpa/tsconfig.json

@@ -10,8 +10,11 @@
     "lib": ["es6", "dom"],
     "types": [ "webpack-env", "whatwg-fetch" ],
     "paths": {
-      // Fixes "Duplicate identifier 'Redux'" error when packages were installed via Yarn (by specifying which .d.ts file is authoritative)
-      "redux": ["./node_modules/@types/redux/index"]
+      // Fix "Duplicate identifier" errors caused by multiple dependencies fetching their own copies of type definitions.
+      // We tell TypeScript which type definitions module to treat as the canonical one (instead of combining all of them).
+      "history": ["./node_modules/@types/history/index"],
+      "redux": ["./node_modules/@types/redux/index"],
+      "react": ["./node_modules/@types/react/index"]
     }
   },
   "exclude": [

templates/ReactSpa/tsconfig.json

@@ -1,10 +1,17 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "moduleResolution": "node",
     "target": "es6",
     "jsx": "preserve",
     "sourceMap": true,
-    "skipDefaultLibCheck": true
+    "skipDefaultLibCheck": true,
+    "paths": {
+      // Fix "Duplicate identifier" errors caused by multiple dependencies fetching their own copies of type definitions.
+      // We tell TypeScript which type definitions module to treat as the canonical one (instead of combining all of them).
+      "history": ["./node_modules/@types/history/index"],
+      "react": ["./node_modules/@types/react/index"]
+    }
   },
   "exclude": [
       "bin",