Wails Svelte Events question

[FreezeManny]

Hello,
I am really stuck creating a event from Go that calls a function in TS (Svelte + Vite).
I hope you could help.

import { onMount } from 'svelte';
import runtime from '@wailsapp/runtime';
	
onMount(() => {
		// Ensure runtime is initialized before accessing it
		if (!runtime || !runtime.Events || !runtime.Events.On) {
			console.error('Wails runtime is not available.');
			return;
		}

		// Handle Import Event
		const onImportEvent = (message: any) => {
			console.log('Received event:', message);
		};

		// Listen for Wails events
		runtime.Events.On('connectionCountChanged', onImportEvent);
	});

Go:

	runtime.EventsEmit(e.ctx, "connectionCountChanged", e.GetConnectionNumber())

It always produces this error:
events.js:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'OnMultiple')
at OnMultiple (events.js:22:22)
at Object.On (events.js:33:2)
at +page.svelte:22:18
at run (utils.js:41:9)
at Array.map ()
at Component.js:47:48
at flush (scheduler.js:99:5)
at init (Component.js:164:3)
at new Root (root.svelte:21:25)

(error in Page.svelte is the line with runtime.Events.On

[nigel-dev]

So I think the issue is with your registering of the event handler on the JS side. Here is my example using wails init -n myproject -t svelte-ts

In my example its runtime.EventsOn whereas yours is runtime.Events.On

Here's my demo code

App.svelte

<script lang="ts">
  import logo from './assets/images/logo-universal.png'
  import {Greet} from '../wailsjs/go/main/App.js'
  import {EventsOn} from "../wailsjs/runtime";


  let resultText: string = "Please enter your name below 👇"
  let name: string
  let count: number

  function greet(): void {
    Greet(name).then(result => resultText = result)
  }
  EventsOn("tick", (message)=>{
    count = message
  })
</script>

<main>
  <img alt="Wails logo" id="logo" src="{logo}">
  <div class="result" id="result">
    <p>{resultText}</p>
  </div>
  <div class="input-box" id="input">
    <p>Count: {count}</p>
    <input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>
    <button class="btn" on:click={greet}>Greet</button>
  </div>
</main>
...
styles omitted

app.go

package main

import (
	"context"
	"fmt"
	"github.com/wailsapp/wails/v2/pkg/runtime"
	"time"
)

// App struct
type App struct {
	ctx context.Context
}

// NewApp creates a new App application struct
func NewApp() *App {
	return &App{}
}

// startup is called when the app starts. The context is saved
// so we can call the runtime methods
func (a *App) startup(ctx context.Context) {
	a.ctx = ctx
	go func() {
		var count int = 0
		for {
			time.Sleep(3 * time.Second)
			runtime.EventsEmit(ctx, "tick", count)
			runtime.LogPrintf(ctx, "Tick [%d]", count)
			count++
		}
	}()
}

// Greet returns a greeting for the given name
func (a *App) Greet(name string) string {
	return fmt.Sprintf("Hello %s, It's show time!", name)
}

[FreezeManny]

Thank you very much! My problem was, that I tried to import EventsOn from @wails/runtime and not from the locally created ../wailsjs!
With @wails/runtime there is no EventsOn, which is why I tried to import Events and then use Events.On!
Sometimes the most annoying bugs are the simplest. Did not think to check the import

[nigel-dev]

Its always the simple stuff, lol!