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

[nivanis91]

HI, here's entry and output:

 entry: {
     main: [
           `webpack-dev-server/client?https://${HOST}:${WEBPACK_DEVSERVER_PORT}`,
           'webpack/hot/dev-server',
           './src/shell.tsx',
         ]
   },
 output: {
         path: distPublicPath,
         publicPath,
         filename: `[name].${theme}.js`,
         chunkFilename: `[name].${theme}.js`,
         hotUpdateChunkFilename: 'hot/hot-update.js',
         hotUpdateMainFilename: 'hot/hot-update.json',
       }

[alexander-akait]

Remove:

`webpack-dev-server/client?https://${HOST}:${WEBPACK_DEVSERVER_PORT}`,
'webpack/hot/dev-server',

To be honestly I don't know how it works before, because you have multiple clients and hot code, webpack-dev-server by default include hot and client

[nivanis91]

Thanks, the app now works as expected, but HMR does not work.

Web console says everything is fine:

[webpack-dev-server] Hot Module Replacement enabled.
[webpack-dev-server] Live Reloading enabled.

I tried both hot:'only' and hot:true. I have also removed HotModuleReplacementPlugin.

Almost there:)

[alexander-akait]

Remove

hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json',

you don't have hash here, so browser can cache them, ideally you should not touch these options, it is very exotic options

[alexander-akait]

Also my recommendation to remove publicPath, webpack v5 has auto value by default, so it will generate relative paths and no matter there your store your files

[nivanis91]

Remove

hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json',

you don't have hash here, so browser can cache them, ideally you should not touch these options, it is very exotic options

Removed them, but still nothing :(

The app works fine, everything in the console and terminal is fine, but HMR doesn't work.

[alexander-akait]

Can you provide the plugins options?

[alexander-akait]

or maybe run npx webpack info

[nivanis91]

plugins: [
  new MiniCssExtractPlugin({
    filename: isDev
      ? `[name].${theme}.css`
      : `[name].${theme}.[contenthash].css`,
    ignoreOrder: true,
  }),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(mode),
    'process.env.theme': JSON.stringify(theme),
    DEBUG: JSON.stringify(isDev),
    IS_SERVER: JSON.stringify(false),
    MARKETPLACE: JSON.stringify(marketplace),
  }),
  new CopyWebpackPlugin({
    patterns: [
      {
        from: 'server/public',
        context: process.cwd(),
      },
    ],
  }),
  new AssetsPlugin({
    filename: `assets.${theme}.json`,
    path: distPath,
    prettyPrint: true,
    update: true,
  }),
],

[alexander-akait]

hm, looks fine, does no hot and no browser reload work?

[nivanis91]

Nope, I need to shut down the server and start it again to see the changes.

[nivanis91]

npx webpack info

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 1.48 GB / 16.00 GB
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: 90.0.818.56
    Firefox: 88.0
    Safari: 14.1.2
  Monorepos:
    Yarn Workspaces: 1.22.10
    Lerna: 3.22.1
  Packages:
    assets-webpack-plugin: ^7.0.0 => 7.1.1 
    copy-webpack-plugin: ^8.1.1 => 8.1.1 
    css-minimizer-webpack-plugin: ^1.3.0 => 1.3.0 
    optimize-css-assets-webpack-plugin: ^5.0.1 => 5.0.3 
    webpack: 5.50.0 => 5.50.0 
    webpack-bundle-analyzer: ^4.4.0 => 4.4.2 
    webpack-cli: ^4.8.0 => 4.8.0 
    webpack-dev-server: 4.0.0-rc.1 => 4.0.0-rc.1 
    webpack-merge: ^4.2.1 => 4.2.2 

[alexander-akait]

You still on [email protected], please update it, also you don't need optimize-css-assets-webpack-plugin in your deps, because you use css-minimizer-webpack-plugin, I don't have ideas, and to be honest, I'm tired of guessing on the coffee grounds, please provide reproducible test repo or steps to reproduce

[nivanis91]

You're right. Thanks for the help so far, it's been immense.

I will let you know if I find out more, as I believe the issue is on my side right now.

Cheers.

[alexander-akait]

Yep, feel free to ping me, anyway you can invite me in project, I will look at the problem and say how to fix it

[nivanis91]

Ok, this is my last shot, but I think I might have clue:

When I make changes to my entry point file (shell.tsx), save it - the changes are finally detected and page is refreshed, but error is thrown:

ChunkLoadError: Loading hot update chunk vendors failed.
(error: https://app.myapp.net:3001/static/myapp/vendors.306180afceec1e82b967.hot-update.js)

In network log, other chunks are missing as well:

administration.306180afceec1e82b967.hot-update.js
focus-visible.306180afceec1e82b967.hot-update.js

When I go to https://app.myapp.net:3001/webpack-dev-server

Those files really don’t exist (only original versions ie. administration.theme-XY.js), but there are some other with that hash that do exist, such as:

- main.306180afceec1e82b967.hot-update.js
- runtime.306180afceec1e82b967.hot-update.js
- 306180afceec1e82b967.hot-update.json

Here is part of config regarding split chunks:

optimization: {
      minimizer: [new CssMinimizerPlugin(), '...'],
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          ui: {
            test: /\/node_modules\/@myapp-ui\//,
            name: 'ui',
          },
          defaultVendors: {
            test: new RegExp(
              [
                'react/',
                'react-dom',
                'react-redux',
                'react-intl',
                'react-router-dom',
                'react-router',
                'react-virtualized',
                'intl',
                'lodash',
                'core-js',
                'redux',
                'history',
                'recompose',
                'babel-runtime',
                'date-fns',
              ]
                .map(m => `\\/node_modules\\/${m}`)
                .join('|')
            ),
            name: 'vendors',
          },
          default: false,
        },
      },
      runtimeChunk: 'single',
    },

Hope this gives you a better clue. If not, thanks anyway.

[alexander-akait]

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

[wilsonwangme]

gitpod-io/gitpod#11170 (comment) This works for me