Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enable single page app react hot reload webpack

I have some problems setting up a single page react app using react router with the webpackdevserver. If I use browserhistory webpack has some problems when entering a nested route url (/client/view for example). This could be solved adding apiFallback but hot reload does still have a problem. It tries to load the hot-update.json file from the deep url (/client/view/hot-update.json) which does not exist and therefor fails and reloads the page. How can i tell hotreload to always load the hot-update.json from the base url (/)?

like image 276
Marc Avatar asked Oct 20 '16 16:10

Marc


People also ask

How do I turn on hot reload in react?

webpack-dev-server: use web pack with a development server; use webpac-dev-middleware under the hood; webpack-hot-middleware: notify browser when a new bundle is built. webpack-hot-server-middleware: used for hot update webpack bundle on server rendering. react-hot-loader v3: hot reload for react.

Does Webpack have hot reload?

webpack-dev-server supports a hot mode in which it tries to update with HMR before trying to reload the whole page. See the Hot Module Replacement guide for details.

How do I enable hot module replacement in Webpack?

To enabling HMR in your project, you need to let your application know how to handle hot updates. You can do so by implementing the module. hot API exposed by Webpack. Once the hot update is accepted, the HMR runtime and the loaders will take over to handle the update.


1 Answers

I had a similar issue when using a publicPath other than '', which I solved by adding a proxy entry to the devServer options:

devServer: {
  // ... rest of options
  proxy: {
    '/myPublicPath/*': {
      target: 'http://localhost:8080/',
      pathRewrite: { '^/myPublicPath': '' },
  }
}

Other than that, make sure both output.publicPath and devServer.publicPath is set and equal.

Hope this helps!

like image 198
Kris Selbekk Avatar answered Oct 23 '22 12:10

Kris Selbekk