Почему получаю ошибку «Uncaught TypeError: e is not a function»?

Question

[kosavpa]

Пытаюсь написать чат используя RSocket, но получаю ошибку в js "Uncaught TypeError: e is not a function", после сборки с помощью webpack в строчке payload: { metadata: encodeBearerAuthMetadata(getCookie('authToken')) }, при обявлении setup.

Из за чего такое может происходить и как это исправить?

package.json:

{
  "name": "chat",
  "version": "1.0.0",
  "description": "rsocket project",
  "main": "index.js",
  "type": "module",
  "dependencies": {
    "base-64": "^1.0.0",
    "buffer": "^6.0.3",
    "rsocket-core": "^0.0.29-alpha.0",
    "rsocket-flowable": "^0.0.29-alpha.0",
    "rsocket-tcp-server": "^0.0.29-alpha.0",
    "rsocket-types": "^0.0.29-alpha.0",
    "rsocket-websocket-client": "^0.0.29-alpha.0",
    "rsocket-websocket-server": "^0.0.29-alpha.0",
    "web-vitals": "^2.1.4",
    "ws": "^7.4.3"
  },
  "scripts": {
    "test": "test"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.92.1",
    "webpack-cli": "^5.1.4"
  }
}

JS:

import RSocketClient from 'rsocket-core';
import IdentitySerializer from 'rsocket-core';
import JsonSerializer from 'rsocket-core';
import encodeRoute from 'rsocket-core';
import encodeBearerAuthMetadata from 'rsocket-core';
import base64 from 'base-64';
import WebSocket from 'ws';
import RSocketWebsocketClient from 'rsocket-websocket-client';

// ---------------------

setUpEventsAndConnect();

// ---------------------

function connect() {
  return new RSocketClient({
    serializers: {
      data: JsonSerializer,
      metadata: IdentitySerializer
    },
    setup: {
      keepAlive: 60000,
      lifetime: 180000,
      dataMimeType: 'application/json',
      metadataMimeType: 'message/x.rsocket.routing.v0',
      payload: {
        metadata: encodeBearerAuthMetadata(getCookie('authToken'))
      }
    },
    transport: new RSocketWebsocketClient({
      url: 'ws://localhost:8080/',
      wsCreator: (url) => {
        return new WebSocket(url);
      }
    }),
  })
    .connect();
}

function setUpEventsAndConnect() {
  connect()
    .subscribe({
      onComplete: socket => {
        addEventListenerToSendButton(socket)
        
        socket.requestStream({
          data: Buffer.from(JSON.stringify(createAndSendMessage())),
          metadata: encodeRoute('chat')
        }).subscribe({
          onComplete: () => console.log('complete'),
          onError: error => {
            console.log(error);
          },
          onNext: payload => {
            createAndDrawMessage(payload.data)
          },
          onSubscribe: subscription => {
            subscription.request(2147483647);
          },
        });
      },
      onError: error => {
        console.log(error);
      },
      onSubscribe: cancel => { }
    });
}

function addEventListenerToSendButton(socket) {
  const sendButton = document.getElementById('sendButton');
  const inputMessage = document.getElementById('inputMessage');

  sendButton.onclick(event => {
    const message = createAndSendMessage();

    if (message.text) {
      socket.fireAndForget({
        data: Buffer.from(JSON.stringify(message)),
        metadata: encodeRoute('chat')
      })

      inputMessage.value('')
    }
  });
}

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

function createAndSendMessage() {
  return new Message(
    JSON.parse(base64.decode(jwt.split('.')[1])).sub,
    document.getElementById('inputMessage').value,
    new Date());
}

function createAndDrawMessage(message) {
  const chatDesk = document.getElementById('chatDesk')

  const wrapper = document.createElement('div')

  wrapper.className = 'wrapperDiv'

  const sender = document.createElement('div')

  sender.className = 'senderDiv'

  const text = document.createElement('div')

  text.className = 'textDiv'

  const data = document.createElement('div')

  data.className = 'dataDiv'

  wrapper.appendChild(sender)
  wrapper.appendChild(text)
  wrapper.appendChild(data)

  chatDesk.appendChild(wrapper)
}

class Message {
  sender
  text
  date

  constructor(sender, text, date) {
    this.sender = username
    this.text = password
    this.date = date
  }
}

HTML:

<html>

<head>
    <title>RSocket Demo</title>
</head>

<body>
    <div id="chatDesk"></div>

    <textarea id="inputMessage"></textarea>
    <button id="sendMessage"></button>

   <script src="index.js"></script>
</body>

</html>

После сборки webpack'ом в следующем фрагменте появляется ошибка:

payload: {
                    metadata: e(function(e) {
                        let t = document.cookie.match(new RegExp("(?:^|; )" + e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)"));
                        return t ? decodeURIComponent(t[1]) : void 0
                    }("authToken"))
                }

При написании использовал этот пример: https://rsocket.io/guides/rsocket-js/client/rsocke...

Comments

[szQocks]

а почему ты её не должен получать ?

[kosavpa]

szQocks, потому что как следует из библиотечного файла encodeBearerAuthMetadata - это функция (export function encodeBearerAuthMetadata(token: string | Buffer): Buffer;), а экспорт класса RSocketWebSocketCkient выглядит следующим образом:

export default class RSocketWebSocketClient implements DuplexConnection {
    constructor(options: ClientOptions, encoders?: Encoders<any>);
    close(): void;
    connect(): void;
    connectionStatus(): Flowable<ConnectionStatus>;
    receive(): Flowable<Frame>;
    sendOne(frame: Frame): void;
    send(frames: Flowable<Frame>): void;
}

[kosavpa]

я делал через импорты и после все собирал в один main.js файл с помощью webpack, но там не особо понятно, скорее всего из именования самого webpack'а. Здесь перед моим index.js объявлено ещё два скрипты, они предоставляют глобальное переменные, к которым я и обращаюсь

[szQocks]

kosavpa, если ты юзаешь webpack, то и установи его нормально, не через cdn, я даже ссылку найти не могу в доке на эту cdn

[kosavpa]

поправил вопрос

[szQocks]

kosavpa, metadata: e ну вот эта e лишняя, почему она там - без понятия, там вообще импортируется import { RSocketClient } from 'rsocket-core';

[kosavpa]

получается webpack не идеально собирает файлы?

[szQocks]

kosavpa, скорее всего дело не в вебпаке, а в неверных импортах, либо в этой библиотеке о которой я вообще впервые слышу, зато у них там 5к долларов есть донатов, хотя скачиваний у ней очень мало, невероятно

[kosavpa]

Сейчас ругается на RSocketWebsocketClient (Uncaught TypeError: i is not a constructor)

(()=>{
        "use strict";
        var e = r(511)
          , t = r(914)
          , n = r(591)
          , i = r(617);
        function s() {
            return new o(JSON.parse(t.decode(jwt.split(".")[1])).sub,document.getElementById("inputMessage").value,new Date)
        }
        new e({
            serializers: {
                data: e,
                metadata: e
            },
            setup: {
                keepAlive: 6e4,
                lifetime: 18e4,
                dataMimeType: "application/json",
                metadataMimeType: "message/x.rsocket.routing.v0",
                payload: {
                    metadata: (function(e) {
                        let t = document.cookie.match(new RegExp("(?:^|; )" + e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)"));
                        return t ? decodeURIComponent(t[1]) : void 0
                    }("authToken"))
                }
            },
            transport: new i({
                url: "ws://localhost:8080/",
                wsCreator: e=>new n(e)
            })
        }).connect().subscribe({
            onComplete: t=>{
                !function(t) {
                    const r = document.getElementById("sendButton")
                      , n = document.getElementById("inputMessage");
                    r.onclick((r=>{
                        const i = s();
                        i.text && (t.fireAndForget({
                            data: Buffer.from(JSON.stringify(i)),
                            metadata: e("chat")
                        }),
                        n.value(""))
                    }
                    ))
                }(t),
                t.requestStream({
                    data: Buffer.from(JSON.stringify(s())),
                    metadata: e("chat")
                }).subscribe({
                    onComplete: ()=>console.log("complete"),
                    onError: e=>{
                        console.log(e)
                    }
                    ,
                    onNext: e=>{
                        !function(e) {
                            const t = document.getElementById("chatDesk")
                              , r = document.createElement("div");
                            r.className = "wrapperDiv";
                            const n = document.createElement("div");
                            n.className = "senderDiv";
                            const i = document.createElement("div");
                            i.className = "textDiv";
                            const s = document.createElement("div");
                            s.className = "dataDiv",
                            r.appendChild(n),
                            r.appendChild(i),
                            r.appendChild(s),
                            t.appendChild(r)
                        }(e.data)
                    }
                    ,
                    onSubscribe: e=>{
                        e.request(2147483647)
                    }
                })
            }
            ,
            onError: e=>{
                console.log(e)
            }
            ,
            onSubscribe: e=>{}
        });
        class o {
            sender;
            text;
            date;
            constructor(e, t, r) {
                this.sender = username,
                this.text = password,
                this.date = r
            }
        }
    }
    )()

Не подскажешь в ещё раз?

[szQocks]

kosavpa, вряд ли смогу помочь, потому что документация там нулевая, как я уже и сказал я даже не нашёл тех cdn ссылок, которые были до этого в вопросе

[kosavpa]

понял, в любом случае убрать е помогло, можешь ответом написать - помечу как решение?

[szQocks]

kosavpa, даже не представляю, что я там могу написать в ответ, покажи кофиг вебпака

[kosavpa]

и правда)