UXP Flyout Menu Manifest Error

InDesign
,
13

I’ve found a hint as to what the next steps are by studying PanelController.jsx class component. inside all the create, show, hide functions reside, as well as a invokeMenu(id) function.

invokeMenu(id) {
    console.log(id)
    const menuItem = this[_menuItems].find((c) => c.id === id)
    console.log(menuItem)
    if (menuItem) {
        const handler = menuItem.oninvoke
        console.log(handler)
        if (handler) {
            handler()
        }
    }
}

console logs in that function do fire, but adding an oninvoke property to the menuItems objects

{ id: "version", label: `Plugin Version: ${version}`, oninvoke: () => console.log("version") },

throws a webpack error uxp://uxp-internal/domjs_scripts.js:2 Uncaught Error: Cannot find module 'path'

EDIT: it seems when writing the oinvoke property vscode accidentally imported an on from somewhere that threw the error. it all works now and if anyone else comes across this issue in the future here is what my index.jsx looks like:

import React from "react"

import { PanelController } from "./controllers/PanelController.jsx"

import { entrypoints } from "uxp"
import Home from "./panels/Home"

const version = require("uxp").versions.plugin

const index_AR_Controller = new PanelController(() => <Home />, {
    id: "index_AR",
    menuItems: [
        { id: "version", label: `Plugin Version: ${version}`, oninvoke: () => console.log("Version") },
        { id: "raiseShields", label: "Shields Up", oninvoke: () => console.log("Shields") },
        { id: "makeItSo", label: "Engage", oninvoke: () => console.log("Engage") },
    ],
})

entrypoints.setup({
    plugin: {
        create(plugin) {
            /* optional */ console.log("created")
        },
        destroy() {
            /* optional */ console.log("destroyed")
        },
    },
    panels: {
        index_AR: index_AR_Controller,
    },
})