Gtk.Box add() undefined inside GNOME shell extension

[Abdillah]

Hello,

I created a widget in an extension (the prefs.js), then register a custom widget that extends Gtk.Box (the snippet below). But then an exception of TypeError: this.add is not a function is thrown.

I wonder if some of Gi binding for Gtk.Box is incomplete? I wonder if anyone has a better way debugging this kind of error.

imports.gi.versions.Gtk = "3.0";

const Lang = imports.lang;
const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;

const SomeWidget = GObject.registerClass({}, class SomeWidget extends Gtk.Box {
    constructor(params) {
        super(params);

        let stack = new Gtk.Stack({
            transition_type: Gtk.StackTransitionType.SLIDE_LEFT_RIGHT,
            transition_duration: 500
        });

        let stack_switcher = new Gtk.StackSwitcher({
            stack: stack
        });

        this.add(stack_switcher);
        this.add(stack);
    }
}

[jrahmatzadeh (Javad Rahmatzadeh)]

1. Remove this line:

   imports.gi.versions.Gtk = "3.0";
   

2. The add method for Gtk.Box in GTK4 is append() and prepend().
   Use this.append() instead.

More about that in GNOME 40 Port Guide.

[Abdillah]

While that works I still wonder why some documented GIR method or props sometime failed inside GNOME Shell but succeed in GJs.

[fmuellner (Florian Müllner)]

If you are still talking about the Gtk.Box.add() example, the reason is that the process that opens extension prefs dialogs was ported to GTK4. As it is not possible to mix different GTK versions within the same process, all extension prefs post GNOME 40 must use GTK4 instead of GTK3.