React slingshot - Webpack hot middleware returning 404 on hot-update.json when using react router sub-routes

Question

Im using the react slingshot starter project for my react/redux app. Hot reload works great when I use routes like /foo but I've found that hot reload isn't working on subroutes like /foo/bar. I haven't made any changes to the out-of-the-box webpack config file, which can be found here https://github.com/coryhouse/react-slingshot/blob/master/webpack.config.js

I get 404 GET http://localhost:3004/orders/c344e97ed1fbc2923017.hot-update.json 404 (Not Found)on the CreateOrder component when I have the following routes configuration:

<Route path="/" component={App}>
    <Route path="login" component={Login} />
    <Route path="orders" component={OrderPanel} />
    <Route path="orders/create" component={CreateOrder} />
    <Route path="*" component={NotFoundPage} />
</Route>

But when I change the path from orders/create to just create, it doesn't returns a 404.

It seems like the hot update middleware is trying to fetch the hot-update.json from the /orders subroute?

Yannick Schuchmann · Accepted Answer · 2017-02-23T12:23:30.697

5

Just for completeness and anyone having this problem with an older version of slingshot. This was also mentioned in issue 75 and fixed here by replacing:

publicPath: '',

with

publicPath: '/',

in webpack.config.js

UPDATE: From reduckted's comment the publicPath has to start and end with a slash. Replace:

publicPath: 'dist/',

with

publicPath: '/dist/',

edited Feb 23 '17 at 12:23

answered Apr 08 '16 at 11:07

Yannick Schuchmann

512
1
5
15

1

Had a similar issue. I already had a public path ending with a slash. I fixed it by also making the public path _start_ with a slash. For example, I had `publicPath: 'dist/'`, but had to change it to `publicPath: '/dist/'`. – reduckted Feb 22 '17 at 01:26
@reduckted I've updated my answer. Thanks for pointing this out. – Yannick Schuchmann Feb 23 '17 at 12:24

score 0 · Answer 2 · answered Nov 25 '16 at 12:31

publicPath config wasn't an issue for me. If you are using redux can try this.

For some random reason redux-devtools was not allowing hot reload for me. Try removing it from root component and redux compose config.

Note: Use redux devtool browser extension with this config in your store configuration: window.devToolsExtension ? window.devToolsExtension() : f => f

Also, must read: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

Or try hot reload 3: example: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

React slingshot - Webpack hot middleware returning 404 on hot-update.json when using react router sub-routes

2 Answers2