TypeError: this.opts.wsEngine is not a constructor when creating socket connection on server

Describe the bug When I created a socket connection for my server, I see the following error:

App threw an error during load
TypeError: this.opts.wsEngine is not a constructor
    at Server.init (webpack:///./node_modules/engine.io/lib/server.js?:81:15)
    at new Server (webpack:///./node_modules/engine.io/lib/server.js?:68:10)
    at Function.attach (webpack:///./node_modules/engine.io/lib/engine.io.js?:124:18)
    at Server.initEngine (webpack:///./node_modules/socket.io/dist/index.js?:187:27)
    at Server.attach (webpack:///./node_modules/socket.io/dist/index.js?:174:14)
    at new Server (webpack:///./node_modules/socket.io/dist/index.js?:70:18)
    at eval (webpack:///./server/controller.ts?:35:10)

/server/controller.ts is my TypeScript file which creates an express app and uses that to create the socket connection. This error is thrown when I am bundling with webpack.

To Reproduce

Please fill the following code example:

Socket.IO server version: 4.0.0

Server

import express from 'express';
import {createServer} from 'http';
import {Server} from 'socket.io';

const app = express();
const server = createServer(app);
const io = new Server(server, {});

let userMsgQueue = new Queue();

io.on("connection", (socket) => {
    console.log('server connected');

    socket.on('message', msg => {
        console.log(`Message: ${JSON.stringify(msg)}`);
    });

    socket.on('disconnect', () => {
        console.log('server disconnected');
    });
});

const PORT = 5000;
server.listen(PORT);

Socket.IO client version: 4.0.0

Client

import { io } from "socket.io-client";

let socket = io("http://localhost:5000");

socket.on('connection', () => {
    console.log(`Client connected: ${socket.id}`);
}

socket.on('disconnect', () => {
    console.log("Client disconnected");
});

Expected behavior I would expect for this error to not be thrown. I am following the server initialization steps here for v4: https://socket.io/docs/v4/server-initialization/index.html

Platform:

• Device: MacBook Pro (16-inc, 2019)
• OS: macOS Catalina Version 10.15.7

Additional context Other relevant modules:

"express": "^4.17.1",
"typescript": "^4.2.3",
"@babel/cli": "^7.1.0",
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-object-rest-spread": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.13.0",
"@types/express": "^4.17.11",
"webpack": "^4.46.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.1.3",

Here’s my webpack config file:

const path = require("path");
const webpack = require("webpack");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = {
    target: 'electron-renderer',
    entry: {
        main: './src/main.ts',
        index: './src/index.tsx'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /(node_modules)/,
                loader: "babel-loader",
                options: {
                    presets: [
                        "@babel/env",
                        "@babel/react",
                        "@babel/typescript"
                    ],
                    plugins: [
                        "@babel/plugin-transform-runtime",
                        "@babel/proposal-class-properties",
                        "@babel/proposal-object-rest-spread"
                    ]
                }
            },
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/,
                use: ["file-loader"]
            },
            {
                test: /\.svg$/,
                use: ["react-svg-loader"]
            }
        ]
    },
    resolve: {
        extensions: ["*", ".js", ".jsx", ".ts", ".tsx"]
    },
    node: {
        __dirname: false
    },
    externals: {
        'express': 'commonjs express'
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        globalObject: 'this'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new OptimizeCssAssetsPlugin({}),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({})
    ]
};

[jzybert]

I upgraded to 4.1.3 and this warning is no longer present.

[ben-rogerson]

I upgraded from 3.1.1 > 4.5.1 and still received the this.opts.wsEngine is not a constructor error. The error no longer shows after I remove the ws option which has been manually set so socket.io can use the default value (require("ws").Server):

io = new socketIO({
-    wsEngine: 'ws',
    //...
}).adapter(createAdapter(pubClient, subClient));