Invalid frame header error in websocket using by Webpack Hot Update after I use setupProxy for websocket

Question

Below error message is shown on my console.

After researching, I found that this error message is thrown from the initSocket function, which should be used by webpack hot update.

Below is my setupProxy, I hide some content here since I don't think it's very important... But at least it shows that I am not trying to proxy the "localhost:3000/ws" from webpack.

Both my own websocket with proxy, and the webpack hot update itself works fine even with this error message, but it's too annoying and affected the debugging...

Anyway we can do to stop this error message?

I tried to do some research and I found that this error thrown is from webpack's websocket for hot update.

Also I tried to remove & add back my websocket proxy, when I remove that proxy, the error message thrown is gone. When I add it back, the error message thrown is shown again.

Answer 1

I had similar problems with webpack 5 and http-proxy-middleware.
The issue is webpack DevServer is using the /ws path, but my proxy and socket server were also using /ws.

Option 1

Before: proxy and socket server were using /ws.

const setupProxy = [
  createProxyMiddleware('/api', options),
  createProxyMiddleware('/ws', { ...options, ws: true }),
];
module.exports = (app) => app.use(setupProxy);

After: change to use /wss, or anything else.

const setupProxy = [
  createProxyMiddleware('/api', options),
  createProxyMiddleware('/wss', { ...options, ws: true }),
];
module.exports = (app) => app.use(setupProxy);

Option 2

Alternatively, you could modify webpack's socket pathname.
Docs: https://webpack.js.org/configuration/dev-server/#websocketurl
Fix: https://github.com/webpack/webpack/discussions/15520#discussioncomment-2343375

And if you're using CRA, you can set this in your .env.

WDS_SOCKET_PATH=/wds