Injects HMR to Create React App Typescript project
npm install @types/webpack @types/webpack-env @types/react-hot-loader react-app-rewired --save-dev
npm install react-hot-loader --save
npm install react-app-rewire-typescript-hmr --save-dev
End if you planing to use babel also do
npm install babel-loader --save-dev
Change your index.tsx looks like
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
const render = () => {
ReactDOM.render(
<AppContainer>
<App />
</AppContainer>,
document.querySelector('#root')
);
};
if (module.hot) {
module.hot.accept();
}
render();
registerServiceWorker();And create new file named config-overrides.js to start using react-app-rewired
const overrideTsLoader = require('react-app-rewire-typescript-hmr')
module.exports = function override(config, env) {
config.entry = ['react-hot-loader/patch', ...config.entry];
return overrideTsLoader(config);
}If you want to use Babel pass true as second parameter of overrideTsLoader
Also you can pass array of babel loaders. For example to use Emotion call:
overrideTsLoader(config, true, [["emotion", { "sourceMap": true }]])Last thing is do not forget to change npm start script to react-app-rewired start --scripts-version react-scripts-ts