webpack-dev-server: v3 -> v4, certificate issues, resulting in WebSocket being blocked

  • 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.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 31 (18 by maintainers)

Most upvoted comments

Why you do optimization for dev server? It reduces your build time, avoid it and do it only for production, unfortunately I can’t say what is wrong, I really need reproducible example to investigate

or maybe run npx webpack info

Can you provide the plugins options?