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