webpack-dev-server - 4.0.0-beta.3 breaks secure WSS websocket connections with HMR

• Laravel Mix Version: 6.0.23
• Node Version 16.3.0:
• NPM Version 7.15.1:
• OS: MAC OS

Description:

It seems like the upgrade to “webpack-dev-server”: “4.0.0-beta.3” has broken something with the websocket connection of the devServer. If your dev server is running in HTTPS mode the websocket connection no longer uses WSS and SSL which browsers block.

Steps To Reproduce:

It looks like this is if you are using your own key and cert with HMR. We have the below HMR options

mix.options({ hmrOptions: { host: host, port: '8443', } }) .webpackConfig({ devServer: { https: { key: path/to/key, cert: path/to/cert, }, } })

Run NPM hot, the dev server works correctly and serves the assets however the websocket client tries to connect using the insecure ws protocol which chrome does not allow as the page was loaded using HTTPS

[samanthamichele7]

I ran into the same issue (including the cacert error message), but adding https: true to my hmrOptions fixed it for me:

.options({
    hmrOptions: {
        host: host,
        port: "8080",
        https: true
    },
})

I still have cert in my devServer.https config.

[biancarosenbaum]

@samanthamichele7 Thanks so much! Your solution saved me.