#TypeError: Cannot read properties of undefined

16 messages · Page 1 of 1 (latest)

fleet frost
#

Hi, maybe one of you can help me.
I compile my Typescript code with ESBuild.
I get the following error when I try to run my code:

TypeError: Cannot read properties of undefined (reading 'WebView')
    at initWebView (client/index.js:35:27)

My code looks like this, unfortunately I don't see any error which is why the error message appears quite unexpectedly.

class WebViewModule {
    private WebView: alt.WebView = null;

    constructor() {
        this.registerEvents();
        alt.logDebug('WebViewModule loaded!');
    }

    registerEvents() {
        alt.onServer(ToClientEvents.WebView.initWebView, this.initWebView);
        alt.onServer(ToClientEvents.WebView.closeWindow, this.closeWindow);
        alt.onServer(ToClientEvents.WebView.openWindow, this.openWindow);
        alt.onServer(ToClientEvents.WebView.emitWindow, this.emitWindow);
    }

    initWebView(debugWebView: boolean) {
        if (debugWebView) {
            alt.logWarning(this.WebView);
            this.WebView = new alt.WebView('http://localhost:8080');
        } else {
            this.WebView = new alt.WebView(
                'http://resource/client/client-dist/index.html',
                false
            );
        }

        if (this.WebView) {
            this.WebView.focus();
        }
    }

    openWindow(windowName: string, data: object) {
        this.WebView.emit('openWindow', windowName, data);
        alt.toggleGameControls(false);
        alt.showCursor(true);
    }

    closeWindow() {
        this.WebView.emit('closeWindow');
        alt.toggleGameControls(true);
        alt.showCursor(false);
    }

    emitWindow(windowName: string, data: object) {
        this.WebView.emit('emitWindow', windowName, data);
    }
}

Thanks in advance.

void thunder
#

either alt or ToClientEvents is undefined, how are you defining them?

fleet frost
#

ToClientEvents:

export const ToClientEvents = {
    WebView: {
        initWebView: 'client::initWebView',
        openWindow: 'client::openWindow',
        emitWindow: 'client::emitWindow',
        closeWindow: 'client::closeWindow',
    },
    CharacterSelection: {
        startCharacterSelection: 'client::startCharacterSelection',
    },
};

alt is a imported module:

import * as alt from 'alt-client'
void thunder
#

both of those should be fine thonk

#

could you maybe check the compiled code to see what it's actually pointing to?

fleet frost
#

This is the compiled part of the file:

// src/client/modules/webview/WebViewModule.ts
import * as alt from "alt-client";

// src/shared/ToClientEvents.ts
var ToClientEvents = {
  WebView: {
    initWebView: "client::initWebView",
    openWindow: "client::openWindow",
    emitWindow: "client::emitWindow",
    closeWindow: "client::closeWindow"
  },
  CharacterSelection: {
    startCharacterSelection: "client::startCharacterSelection"
  }
};

// src/client/modules/webview/WebViewModule.ts
var WebViewModule = class {
  constructor() {
    this.WebView = null;
    this.registerEvents();
    alt.logDebug("WebViewModule loaded!");
  }
  registerEvents() {
    alt.onServer(ToClientEvents.WebView.initWebView, this.initWebView);
    alt.onServer(ToClientEvents.WebView.closeWindow, this.closeWindow);
    alt.onServer(ToClientEvents.WebView.openWindow, this.openWindow);
    alt.onServer(ToClientEvents.WebView.emitWindow, this.emitWindow);
  }
  initWebView(debugWebView) {
    if (debugWebView) {
      alt.logWarning(this.WebView); //!! Line 35
      this.WebView = new alt.WebView("http://localhost:8080");
    } else {
      this.WebView = new alt.WebView(
        "http://resource/client/client-dist/index.html",
        false
      );
    }
    if (this.WebView) {
      this.WebView.focus();
    }
  }
  openWindow(windowName, data) {
    this.WebView.emit("openWindow", windowName, data);
    alt.toggleGameControls(false);
    alt.showCursor(true);
  }
  closeWindow() {
    this.WebView.emit("closeWindow");
    alt.toggleGameControls(true);
    alt.showCursor(false);
  }
  emitWindow(windowName, data) {
    this.WebView.emit("emitWindow", windowName, data);
  }
};
void thunder
#

so what's line 35 there

fleet frost
#

I have added a comment for you.

void thunder
#

wtf, this is undefined?

#

are you destructuring or referencing methods anywhere?

fleet frost
#

No, I don't understand it.
this can't actually be undefined, otherwise the initWebView function wouldn't be called, would it? Because it is also called via this.initWebView.

void thunder
#

this could be incorrect when you destructure/dereference a method, like this:

class X {
  method() { console.log(this) }
}
const wrongThis = new X().method
wrongThis() // logs globalThis
#

but i don't know how it could be undefined

fleet frost
#

Ok no, I am not destroying any method. Thank you anyway for your help. I will keep trying to find the error and share my solution afterwards.

stark leaf
#

Your onServer() calls pass the function without it being bound

#

I suggest you change initWebView and the other methods to arrow functions like initWebView = (debugWebView) => {}