Webpack 5 Dev Server proxy seems to be ignored

Question

Firstly, this worked great in webpack 4. After upgrading to webpack 5, everything seems fine except the dev server proxy. Its like whatever values I put in there are just outright ignored.

All I get is the following error Error occured while trying to proxy: localhost:3006/api/configuration

I also used to get logging out of the dev server but that seems to be being ignore too. EG "Proxying from localhost:3006 to localhost:5050

Versions:

• webpack - 5.65.0
• webpack-dev-server - 4.7.2
• webpack-cli - 4.9.1

Webpack.dev.js

const path = require("path");
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");

const common = require('./webpack.common.js');

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

module.exports = merge(common, {
    mode: "development",
    devServer: {
        static: path.join(__dirname, "build"),
        historyApiFallback: true,
        port: 3006,
        proxy: {
            // '/api': 'https://localhost:5050',
            '/api': {
                target: 'https://localhost:5050',
                // pathRewrite: { '^/api': '' },
                secure: true,
            },
        },
        client: {
            logging: 'info',
            overlay: false,
        },
        hot: true,

    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            favicon: "./public/favicon.ico",
            title: "PBO Management | Dev | AWSM",
        }),
        new ReactRefreshWebpackPlugin({
            overlay: false,
        }),        
    ],
});