Enabling webpack hot module reloading?

[stevenmusumeche]

I looked through previous issues and could not find an answer to this. I had hot module reloading working previous with the JS version of create-react-app. After converting it to typescript, everything works well except for hot module reloading. The reloading actually does happen, but any typescript React components are not updating unless I do a full page refresh.

Has anyone got this working with typescript?

[wmonk]

As this issue hasn't been updated for a while, I am going to close it. If there are any updates feel free to re-open and comment. 👍

[stevenmusumeche]

I understand. It's not resolved (HMR doesn't work), but there has been no comment or activity.

[alexwebbb]

howdy

As of Typescript 2.0 (https://tinyurl.com/j8xro5g)

Hot module namespace errors are easily resolved by running

yarn add @types/webpack
yarn add @types/webpack-env

or the equivalent

npm install @types/webpack --save
npm install @types/webpack-env --save

Perhaps this will resolve your issue? I was able to get it working with this style (https://tinyurl.com/y7gzcqqm) of hot module reloading.

My index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

const rootEl = document.getElementById('root') as HTMLElement;

ReactDOM.render(
    <App />,
    rootEl
);

if (module.hot) {
    module.hot.accept('./App', () => {
        const NextApp = require('./App').default;
        ReactDOM.render(
            <NextApp />,
            rootEl
        );
    });
}

registerServiceWorker();

[jcrben]

upstream work seems to be at react/create-react-app#2304