rsocket / rsocket-js

JavaScript implementation of RSocket
https://github.com/rsocket/rsocket-js
Apache License 2.0
594 stars 97 forks source link

rsocket-websocket-client 1.0.0 browser version compilation with WebPack 5 > example #245

Closed maxim-bandurko-lsvt closed 1 year ago

maxim-bandurko-lsvt commented 2 years ago

Hello.

Was trying to compile it for browser using WebPack 5 by adding all needed nodejs polyfills that are used, but failed. Using node-polyfill-webpack-plugin it fails also.

Do you have any setup example how to make it working?

Thank you

viglucci commented 2 years ago

Hi @maxim-bandurko-lsvt, specifically which errors are you receiving?

If you are receiving an error about Buffer missing, this article may help. (https://viglucci.io/how-to-polyfill-buffer-with-webpack-5)

maxim-bandurko-lsvt commented 2 years ago

@viglucci Hello.

Buffer polyfill, yes, it is added. Also, added polyfills to other libraries that are used from nodejs. So, after adding all this, I am getting this error now:

Uncaught (in promise) TypeError: invalid 'instanceof' operand URL
    initAsClient websocket.js:666
    WebSocket websocket.js:85
    wsCreator tmp.js:28
    WebsocketClientTransport WebsocketClientTransport.js:30
    connect WebsocketClientTransport.js:29
    RSocketConnector RSocketConnector.js:88
    step RSocketConnector.js:48
    verb RSocketConnector.js:29
    __awaiter RSocketConnector.js:23
    __awaiter RSocketConnector.js:19
    connect RSocketConnector.js:65

That has just:

if (address instanceof URL) {

At WebPack config I have these plugins:

new NodePolyfillPlugin(),
new webpack.ProvidePlugin({
            process: 'process/browser',
}),
new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
}),

And these resolves:

fallback: { 
            "fs": false,
            "net": false,
            "tls": false,
            "path": false,
            "os": false,
            "zlib": false,
            "crypto": false,
            "https": false,
            "http": false,
            "stream": require.resolve("stream-browserify"),
}

Also, because of global issue had to set:

node: {
        global: true
},

At package.json I have these dependencies added:

    "buffer": "^6.0.3",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "process": "^0.11.10",
    "rsocket-core": "^1.0.0-alpha.3",
    "rsocket-websocket-client": "^1.0.0-alpha.3",
    "stream-browserify": "^3.0.0"

Thank you.

viglucci commented 1 year ago

Hey @maxim-bandurko-lsvt not sure you need to add all those additional polyfills, but hard to say without knowing more about the app you are building.

I've put together a minimal working example using only Webpack and rsocket-js, so I don't think there is any issue with using rsocket-js with webpack currently. Please see #246 .

maxim-bandurko-lsvt commented 1 year ago

@viglucci Thank you for example. It is working. My mistake was that had imported ws to my project: import WebSocket from "ws"; that pushed WebPack to include all it's dependencies that are not needed.

All is working properly, thank you.

viglucci commented 1 year ago

Thanks for the update @maxim-bandurko-lsvt , happy to hear you got it working on your end!

maxim-bandurko-lsvt commented 1 year ago

@viglucci Thanks to you too!