v3 -> v4, certificate issues, resulting in WebSocket being blocked

[nivanis91]

• This is a bug
• This is a modification request

Hi guys,

First of all, thanks for all the work you've been putting into this project - it matters.

The issue appears while trying to migrate from v3 to v4 latest (4.0.0-rc.1).
I'm trying to run the app with HMR enabled and own https certificates.

But I'm getting this in web console:

The page at 'https://app.myapp.net:8080/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://app.myapp.net:8080/ws'. This request has been blocked; this endpoint must be available over WSS.

This is the devServer config;

devServer: {
      port: WEBPACK_DEVSERVER_PORT,
      host: HOST,
      hot: 'only',
      headers: { 'Access-Control-Allow-Origin': '*' },
      devMiddleware: {
        writeToDisk: true,
        publicPath,
      },
      allowedHosts: ['localhost', '.myapp.net'],
      https: {
        key: fs.readFileSync(key),
        cert: fs.readFileSync(cert),
      },
    }

Is there something in configuration I'm missing. I've noticed many changes, so I hope someone can give me a hand until more recent docs are out there.

Thanks.

Expected Behavior

Certificate loaded as in v3 and no issues with running the app.

Actual Behavior

Application not loading due to WS being blocked for security issues. Probably certificate not being loaded correctly.

[alexander-akait]

Why do not use the issue template? I don't know what is the problem, sorry

[alexander-akait]

The page at 'https://app.myapp.net:8080/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://app.myapp.net:8080/ws'. This request has been blocked; this endpoint must be available over WSS

Please read the error message, it clearly says what the problem is, you open https://app.myapp.net:8080/ page, but websocket try to connect ws://app.myapp.net:8080/ws

What is versions? How you open page? Do you proxy webpack dev server? Who knows

[nivanis91]

Just updated it, sorry.

Also, I've found very similar issue (or maybe the same) on another place:
laravel-mix/laravel-mix#3021

[alexander-akait]

Not related, please provide steps how we can reproduce

[alexander-akait]

Can't reproduce locally, sorry, without additional information I can't help

[nivanis91]

I come in peace.

I’m migrating from Webpack 4 to 5 (v.5.50.0) and also webpack-dev-server from v3 to v4 (4.0.0-rc.1).

I updated devServer config as per descriptions, but with new versions I’m getting this strange WS error, which wasn’t there previously. Running it locally in browser environment. No proxies for dev server.

I’d hoped there is a new config option added or renamed that I’m missing.

[alexander-akait]

Please create reproducible test steps. What is value in address bar of your browser? Can you show network requests in dev tools. Please always fill out the For Bugs; How can we reproduce the behavior?. Every day I ask it and repeat it.

[alexander-akait]

Hope my PR will fix the problem, I will do stable release today, feel free to update it, if it will not fix the problem, I will reopen

[nivanis91]

Hi, first of all thank you, as your commit made my app start and work again. But WS is still failing to connect

WebSocket connection to 'wss://app.myapp.net:8080/ws' failed at WebSocketClient.js:13

I would like it if I could tell exactly what happened. But this is quite a big app and all I did was update to newest versions of Webpack and webpack-dev-server which resulted in devServer object config changes - which I copy/pasted entirely.

Adress in my navbar is https://app.myapp.net:8080/ and all I can give you from the network log is that the first WS request looks like this:

Request URL: wss://app.myapp.net:3001/ws
Request Method: GET
Status Code: 101 Switching Protocols

and every next is:
Request URL: wss://app.myapp.net:8080/ws -> these are failed

I will give it another look tomorrow with a fresh pair of eyes, but if you have anything else that comes on your mind please do tell.

Also, that fallback you just changed in the code, was there a way in manual setup in order to avoid it? It doesn't matter much right now, but can't hurt.

[alexander-akait]

We have client.webSocketURL: { protocol, hostname, port } and etc, but you don't need this, it should work

WebSocket connection to 'wss://app.myapp.net:8080/ws' failed at WebSocketClient.js:13

need stack trace, on 13 line we have this.client = new WebSocket(url);, it means something blocked your connection to web socket server

[nivanis91]

Hope this gives a bit of a clue. It's all I've got for now.

Not sure what could block it, as only these packages were updated and nothing else. Will check tomorrow to make sure.

[alexander-akait]

Please provide your entry setup

[alexander-akait]

Also you can always debug it, go to node_modules/webpack-dev-server/client/clients/WebSocketClient.js (also here is other files, no magic here just javascript code), based on requestContent screenshot - we don't have this code in our client code...