resolve webpack-hot-middleware conflicts

[xughv]

When I use webpack-hot-middleware with a custom path:

server.js

...
app.use(
  require('webpack-hot-middleware')(compiler, {
    log: false,
    path: '/__my_hmr',
  })
);
...

webpack.config.js

...
entry: {
  main: ['webpack-hot-middleware/client?path=/__my_hmr', './src/index.js'],
},
...

The client will send two HMR requests:

---

The require('webpack-hot-middleware/client') in WHMEventSource.js will create a new EventSourceWrapper, and the path (from query) is the key of EventSourceWrapper in webpack-hot-middleware:

https://github.com/webpack-contrib/webpack-hot-middleware/blob/cb29abb9dde435a1ac8e9b19f82d7d36b1093198/client.js#L119

So inject user's webpack-hot-middleware/client entry before ErrorOverlayEntry, and try to customize overlay on the existing client.

https://github.com/webpack-contrib/webpack-hot-middleware/blob/cb29abb9dde435a1ac8e9b19f82d7d36b1093198/client.js#L302
https://github.com/webpack-contrib/webpack-hot-middleware/blob/cb29abb9dde435a1ac8e9b19f82d7d36b1093198/client.js#L152

[pmmmwh]

CC @blainekasten would be great if you can provide some insights on this.

I will take a look at the WHM docs tomorrow.

[xughv]

In short, via

• webpack-hot-middleware/client in the entry array
• require('webpack-hot-middleware/client') in WHMEventSource.js

the WHM client connect() will be executed twice.

If they have different path(from resource query), the client will create connection for each path.

[KevinGruber]

@pmmmwh we face the same issue in our cli. we use a seperate server with webpack-hot-middlware and we also see that behaviour. Would be cool if you could merge that #soon.

[pmmmwh]

Hi! I have taken a look at this and I think a better way to handle this would be to:

1. Make the ErrorOverlayEntry the last entry in the chain, and
2. Allow the plugin to accept custom sockPath (see Add custom sockHost/sockPort/sockPath #52)

(I'm assuming that requiring the client with the same path will not execute connect twice, but please correct me if I am wrong)

Update:
Please check #64 if you have time, it should solve most of the issues :)

[xughv]

😮 I guess sockPath cannot solve this problem.

---

Only use the WHM singletonKey in WHMEventSource.js to custom overlay can solve it now.
https://github.com/webpack-contrib/webpack-hot-middleware/blob/cb29abb9dde435a1ac8e9b19f82d7d36b1093198/client.js#L152

[pmmmwh]

Only use the WHM singletonKey in WHMEventSource.js to custom overlay can solve it now.

There is handling for the singletonKey - sockPath is only a fallback.

[xughv]

Only use the WHM singletonKey in WHMEventSource.js to custom overlay can solve it now.

There is handling for the singletonKey - sockPath is only a fallback.

😨 But it seems that webpack not support require() dynamically by variable.

Maybe sockPath cannot be used as a fallback.

[pmmmwh]

😨 But it seems that webpack not support require() dynamically by variable.
Maybe sockPath cannot be used as a fallback.

Yes, I am experimenting with dynamic import or just scrap the idea of injecting the sockPath into the fallback. Still debating whether doing something like that makes any sense ...

[pmmmwh]

Since #64 has been merged I'll close this for now.