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 (/)?
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.
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.
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.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With