TypeError: model.menuItems is not a function or its return value is not iterable

[BUGHERE]

Hello,

I've encountered an issue while attempting to build a demo plugin following the provided instructions, and I'm seeking guidance in resolving it.

instructions

https://github.com/GMOD/jbrowse-plugin-template/blob/main/README.md
https://github.com/GMOD/jbrowse-components/blob/main/CONTRIBUTING.md

enviroments

• ubuntu: 22.04
• node: 20.18.1
• jb2: 2.17(newest clone)

issue

When I finished these instruction, I visit the url: http://localhost:3000/?config=http://localhost:9000/jbrowse_config.json
and then open hello view, I got this error:

and also tried yarn browse: http://localhost:8999/

Thank you in advance for your time and help.

[cmdcolin]

We changed menuItems to be a function rather than a "getter".

So if you have code in your plugin that says

"get menuItems()"

just change it to

"menuItems()"

If you found any code out there that you are using that still uses the "get menuItems()" code let me know...I can update it

[cmdcolin]

(note that the reason for this change is that the functions can be overridden while referrring to the parent behavior while getters can't really. here is an example of that overriding)

const Parent=types.model({}).views(self=>({
  menuItems() {
    console.log('parent menu items function')
    return [...parent menu item stuff here]
  }
}))

const Child = types.compose(Parent,types.model({}).views(self=>{
  const {menuItems:parentMenuItems} = self
  return {
    menuItems() {
       return [...parentMenuItems(), ...add more child menu items...]
    }
  }
})

[BUGHERE]

Thank you for your reply. After reading your reply, I find the reason here.

The error was thrown in: jbrowse-components/packages/app-core/src/ui/App/ViewMenu.tsx

      <CascadingMenu
        menuItems={[
          ...model.menuItems(),
        ]}
      />

the model doesn't has menuItems, so get TypeError: model.menuItems is not a function or its return value is not iterable

and then I go to the default code in: jbrowse-plugin-jb3d/src/HelloView/stateModel.ts

const stateModel = types
  .model({
    id: ElementId,
    type: types.literal('HelloView'),
  })
  .actions(() => ({
    // unused but required by your view
    setWidth() {},
  }))

I didn't add any menuItems here, so I add code:

  .views(() => ({
    menuItems(): MenuItem[] {
      return [
        {
          label: 'Example item',
          onClick: () => {
            console.log('Example item clicked');
          },
        },
      ]
    },
  }))

and then problem solved.