Workaround to work with create-react-app-typescript and react-hot-loader

config-overrides.js

const rewireReactHotLoader = require('react-app-rewire-hot-loader');
const reactAppRewired = require('react-app-rewired');

const getLoader = reactAppRewired.getLoader;
const Matcher = reactAppRewired.Matcher;

const typescriptLoaderMatcher = rule =>
  rule.test &&
  rule.test.toString() === /\.(ts|tsx)$/.toString() &&
  'use' in rule &&
  Array.isArray(rule.use) &&
  rule.use.find((r) => r.loader && /ts-loader/.test(r.loader));

module.exports = {
  webpack: function(config, env) {
    if (env === 'development') {
      config = rewireReactHotLoader(config, env);

      // Locate the Webpack loader responsible for handling Typescript and
      // add babel before typescript for hot loader
      const typescriptLoader = getLoader(config.module.rules, typescriptLoaderMatcher);
      if (!typescriptLoader) {
        throw new Error('Unable to locate typescript loader.');
      }

      typescriptLoader.use.unshift({
        loader: 'babel-loader',
        options: {
          babelrc: true,
          plugins: ['react-hot-loader/babel'],
        },
      });
    }

    return config;
  }
};

configureStore.dev.ts

import {
  createStore,
  compose,
  Reducer,
  Store,
  applyMiddleware,
  GenericStoreEnhancer
} from 'redux';
import createSagaMiddleware from 'redux-saga';
import { all } from 'redux-saga/effects';
import logger from 'redux-logger';
import DevTools from '../../containers/Devtools';

import ApplicationState from '../store.types';

const sagaMiddleware = createSagaMiddleware();

export default (reducers: Reducer<ApplicationState>, sagas: Function) => (
  initialState: ApplicationState
): Store<ApplicationState> => {
  const enhancer = compose(
    // Middleware you want to use in development:
    applyMiddleware(logger, sagaMiddleware),
    // Required! Enable Redux DevTools with the monitors you chose
    DevTools.instrument()
  ) as GenericStoreEnhancer;

  const store = createStore<ApplicationState>(reducers, initialState, enhancer);

  let sagaTask = sagaMiddleware.run(function*() {
    yield all(sagas());
  });
  
  // This is the part to use with react-hot-loader
  // Hot reload reducers (requires Webpack or Browserify HMR to be enabled)
  if (module.hot) {
    module.hot.accept('../reducers', () =>
      store.replaceReducer(
        require('../reducers') /*.default if you use Babel 6+ */
      )
    );

    module.hot.accept('../sagas', () => {
      const getNewSagas = require('../sagas');
      sagaTask.cancel();
      sagaTask.done.then(() => {
        sagaTask = sagaMiddleware.run(function*() {
          yield getNewSagas();
        });
      });
    });
  }

  return store;
};

Root.jsx

import * as React from 'react';
import { hot } from 'react-hot-loader';
import { Provider } from 'react-redux';

import DevTools from '../Devtools';
import configureStore from '../../store/configureStore';
import App from '../App';
import ApplicationState from '../../store/store.types';
import { fetchAuth } from '../../store/common/Auth/Auth';

const store = configureStore({} as ApplicationState);
store.dispatch(fetchAuth());

const isProd = process.env.NODE_ENV === 'production';

const Root = (): JSX.Element => (
  <Provider store={store}>
    <React.Fragment>
      <App />
      {!isProd && <DevTools />}
    </React.Fragment>
  </Provider>
);

export default (isProd ? Root : hot(module)(Root));

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    // "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    // "strict": true,
    "strictNullChecks": true,
    // "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "files": ["src/index.tsx"],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "stories",
    ".storybook",
    "*.stories.tsx",
    "*.test.tsx"
  ],
  "types": ["typePatches"]
}