title: Electron, React and Webpack, how to make HMR work?
body: <p>It is hard to comprehend the complexities of webpack and I need some help getting HMR to work, I have started a new project using <a href="https://www.electronforge.io/" rel="nofollow noreferrer">electron-forge</a> using the typescript-webpack template.</p>
  
  <p>The project got created with the following structure:
  <a href="https://i.stack.imgur.com/jgEJs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jgEJs.jpg" alt="project"></a></p>
  
  <p>You can see the ts-loader configuration is already in there, afterwards I added react and react-dom and set up a hello world App component, the problem is now, when I change that component, I get a webpack HMR error:</p>
  
  <p><a href="https://i.stack.imgur.com/q0tDs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q0tDs.jpg" alt="electron error"></a></p>
  
  <p>not sure how to solve this issue, react-hot-loader seems to be the library to go to get this working but not sure how to make it work with ts-loader, could anybody point out how to get this set up working? Thanks!</p>
  
  <p>Edit 1: I tried adding react-hot-reload but I get a <code>require is not defined</code> error...</p>
  
  <p><a href="https://i.stack.imgur.com/kx1U5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kx1U5.jpg" alt="enter image description here"></a></p>