I would like to run colyseus using webpack but it's not working :/ (solved)

Hello it's my first topic here if there is rules don't hesitate to tell me :

I'm compiling my react with webpack but i would like to add colyseus ...

I run it on server side it's ok ... but when i add it to the client side it's crashing :

import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as Colyseus from "colyseus"

class Salut extends Component {
    constructor(props) {
        super(props)

        this.state = {
            clientId: null
        }
    }

    componentDidMount() {
        this.client = new Colyseus.Client('ws://localhost:4000')
        this.room = this.client.join('room')

        this.setState({
            clientId: this.client.id
        })
    }

    render() {
        const { clientId } = this.state

        return (
            <div>
                Salut {clientId} !
            </div>
        )
    }
}



ReactDOM.render(
    <Salut />,
    document.getElementById("app")
);

here is my stack :


    WARNING in ./node_modules/ws/lib/buffer-util.js
    Module not found: Error: Can't resolve 'bufferutil' in '/project/node_modules/ws/lib'
     @ ./node_modules/ws/lib/buffer-util.js 56:21-42
     @ ./node_modules/ws/lib/sender.js
     @ ./node_modules/ws/index.js
     @ ./node_modules/colyseus/lib/Server.js
     @ ./node_modules/colyseus/lib/index.js
     @ ./src/web/index.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/web/index.js

    WARNING in ./node_modules/ws/lib/validation.js
    Module not found: Error: Can't resolve 'utf-8-validate' in '/project/node_modules/ws/lib'
     @ ./node_modules/ws/lib/validation.js 4:22-47
     @ ./node_modules/ws/lib/sender.js
     @ ./node_modules/ws/index.js
     @ ./node_modules/colyseus/lib/Server.js
     @ ./node_modules/colyseus/lib/index.js
     @ ./src/web/index.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/web/index.js

    ERROR in ./node_modules/memshared/lib/index.js
    Module not found: Error: Can't resolve 'cluster' in '/project/node_modules/memshared/lib'
     @ ./node_modules/memshared/lib/index.js 6:14-32
     @ ./node_modules/colyseus/lib/presence/MemsharedPresence.js
     @ ./node_modules/colyseus/lib/index.js
     @ ./src/web/index.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/web/index.js

    ERROR in ./node_modules/redis-parser/lib/hiredis.js
    Module not found: Error: Can't resolve 'hiredis' in '/project/node_modules/redis-parser/lib'
     @ ./node_modules/redis-parser/lib/hiredis.js 3:14-32
     @ ./node_modules/redis-parser/lib/parser.js
     @ ./node_modules/redis-parser/index.js
     @ ./node_modules/redis/index.js
     @ ./node_modules/colyseus/lib/presence/RedisPresence.js
     @ ./node_modules/colyseus/lib/index.js
     @ ./src/web/index.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/web/index.js

    ERROR in ./node_modules/redis/index.js
    Module not found: Error: Can't resolve 'net' in '/project/node_modules/redis'
     @ ./node_modules/redis/index.js 3:10-24
     @ ./node_modules/colyseus/lib/presence/RedisPresence.js
     @ ./node_modules/colyseus/lib/index.js
     @ ./src/web/index.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/web/index.js

    ERROR in ./node_modules/ws/lib/websocket.js
    Module not found: Error: Can't resolve 'net' in '/project/node_modules/ws/lib'
     @ ./node_modules/ws/lib/websocket.js 7:12-26
     @ ./node_modules/ws/index.js
     @ ./node_modules/colyseus/lib/Server.js
     @ ./node_modules/colyseus/lib/index.js
     @ ./src/web/index.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/web/index.js

    ERROR in ./node_modules/redis/index.js
    Module not found: Error: Can't resolve 'tls' in '/project/node_modules/redis'
     @ ./node_modules/redis/index.js 4:10-24
     @ ./node_modules/colyseus/lib/presence/RedisPresence.js
     @ ./node_modules/colyseus/lib/index.js
     @ ./src/web/index.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/web/index.js

    ERROR in ./node_modules/ws/lib/websocket.js
    Module not found: Error: Can't resolve 'tls' in '/project/node_modules/ws/lib'
     @ ./node_modules/ws/lib/websocket.js 8:12-26
     @ ./node_modules/ws/index.js
     @ ./node_modules/colyseus/lib/Server.js
     @ ./node_modules/colyseus/lib/index.js
     @ ./src/web/index.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/web/index.js

and here my webpack file :

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const NodeExternals = require("webpack-node-externals");

const universalRules = [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader",
      options: {
        presets: ["@babel/preset-env", "@babel/react"]
      }
    }
  }
];

module.exports = [
  {
    mode: "development",
    entry: "./src/web/index.js",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "build")
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "src/index.html"
      })
    ],
    module: {
      rules: [...universalRules]
    },
    devServer: {
      contentBase: "./build",
      host: "0.0.0.0",
      disableHostCheck: true
    }
  }
];

I hope there is a way to fix it else i'll just open a bug on github ... it should be help full

I found the problem by myself ... -_- i was using colyseus server side