How to use the xterm-addon-attach.AttachAddon function in xterm-addon-attach

"use strict";
exports.__esModule = true;
var xterm_1 = require("xterm");
var xterm_addon_attach_1 = require("xterm-addon-attach");
var urlParams = new URLSearchParams(window.location.search);
var term = new xterm_1.Terminal();
var socket = new WebSocket('ws://localhost:' + urlParams.get('socket'));
var attachAddon = new xterm_addon_attach_1.AttachAddon(socket);
// Attach the socket to term
term.loadAddon(attachAddon);
term.open(document.getElementById('xterm-container'));

import { AttachAddon } from 'xterm-addon-attach';

const term = new Terminal({
      cursorBlink: true,
      rows: 20
    });

term.setOption('cursorBlink', true);
term.setOption('cursorStyle', 'block');
term.setOption('convertEol', true);



const urlParams = new URLSearchParams(window.location.search)
const socket = new WebSocket('ws://localhost:' + window.location.port + '/?project=' + urlParams.get('project'));
const attachAddon = new AttachAddon(socket);
term.loadAddon(attachAddon);

term.open(document.getElementById('xterm-container'));

var viewport = document.querySelector('.xterm-viewport');

/* TODO: get viewport dimensions from URL parameters */

async componentDidMount() {
    Terminal.applyAddon(fit);

    this.terminal = new Terminal({convertEol: true, fontSize: 11});
    this.terminal.loadAddon(new AttachAddon(new WebSocket(`ws://127.0.0.1:2222/logs/${this.props.node}`), {bidirectional: false, inputUtf8: true}))
    this.terminal.open(this.termRef.current)
    setInterval(() => this.terminal.fit(), 200)
  }

this.socket.onopen = () => {
                let attachAddon = new AttachAddon(this.socket);
                this.term.loadAddon(attachAddon);
                this.fit();
            };
            this.socket.onerror = e => {throw JSON.stringify(e)};

this.ws.onopen = () => {
        this.attachAddon = new AttachAddon(this.ws);
        this.xterm.loadAddon(this.attachAddon);
      };

this.ws.onopen = () => {
        this.attachAddon = new AttachAddon(this.ws);
        this.xterm.loadAddon(this.attachAddon);
      };

const handleInit = async (xterm, fitAddon) => {
    if (typeof ref === 'function') {
      ref(xterm, fitAddon);
    }
    if (!socket) {
      socket = new SockJS('/terminal-socket');
      socket.onclose = () => {
        socket = null;
      };
      xterm.loadAddon(new AttachAddon(socket));
      xterm.focus();
      await handleResize(xterm);
    }
    setTerminalRef(xterm);
  };

function attachTerminal() {
  term.loadAddon(new AttachAddon(socket, {inputUtf8: true}));
  term._initialized = true;
}

function runRealTerminal() {
  term.loadAddon(new AttachAddon(socket));
  term._initialized = true;
  curFont = 'Ubuntu Mono';
  fitFont(curFont);
  alive = true;
  let timer = setInterval( () => {
    if(term !== undefined) {
      fitFont(curFont);
      window.dispatchEvent(promptEvent);
      clearInterval(timer);
    }
  }, 200);
}