Issue adding custom UI

millie

Excuse my unfamiliarity with Vue.js but I can't seem to successfully follow this tutorial to add a custom UI element: https://docs.rpgjs.dev/guide/create-gui.html#prerequisites

I double checked that I followed all steps and the code builds correctly but I get this error in the console:
The GUI named hudGui is non-existent. Please add the component in the gui property of the decorator @RpgClient

millie

I'm pretty sure I added the hudGui tho - Here's my src/modules/main/client/index.ts

import { RpgClient, RpgModule } from '@rpgjs/client'
import { Characters } from './characters/characters'
import hudGui from './gui/hud.vue'

@RpgModule<RpgClient>({ 
  gui: [
    hudGui
  ]
,
    spritesheets: [
        Characters
    ]
})
export default class RpgClientModuleEngine {}

millie

and part of my modules/main/client/gui/hud.vue:

...
<script>
export default {
    name: 'hudGui',
    inject: ['rpgCurrentPlayer'],
    data() {
        return {
            hp: 0,
            maxHp: 0
        }
    },
...

millie

Btw I just started experimenting with RPGJS today. Maybe there's a breaking change recently somewhere? Most likely it would be me being stupid so plzz help! Also tried this tutorial which gave the same error: https://medium.com/javascript-in-plain-english/for-a-2d-metaverse-in-javascript-add-a-chatbot-in-a-multiplayer-game-f291f22fe9d1

Samarium

Hello and welcome to the forum,

I can't reproduce the problem. The code is correct.

Could you share an example with Github, CodeSandbox or other?

Thanks

millie

Yup! Here's the diff https://github.com/MiltonRen/voiceflow-rpg/commit/7f2c330de736b7faf4aca6a8ac17c5a532c75a00

Samarium

hmm, your code works on my side.

Maybe a package version problem? Try removing node_modules and reinstalling dependencies with npm install

millie

Thanks a lot!!
I also noticed that in my deployment environment it works fine just not local - I think the root cause is I'm using an Apple M2 laptop and running on ARM which node 14 has issue with.