How to greet user after player.changeMap?

samsong

I have created my first scenario. After collecting fruit from map, in the fruit-event, I called player.changeMap('lab');
I want to greet player when he enters the second map, the lab map.
first, I created lab.tmx and the user is teleported to the lab map, and everything is well.
Next, I created lab.ts and the content as follow

import { RpgMap, MapData ,RpgPlayer } from '@rpgjs/server';

@MapData({
    id: 'lab', 
    file: require('./lab.tmx'), 
    name: 'lab'
})
export default class LabMap extends RpgMap {
    async onJoin(player: RpgPlayer) {
        if (player.getVariable('LAB_INTRO')) {
            return
        }
        console.log("player in lab");
        await player.showText('Welcome to my lab!');
        player.setVariable('LAB_INTRO', true);
    }
}

I restarted via npm run dev,but there is no log in console and no 'Welcome to my lab!' message. It seemed that lab.ts is ignored.
Then I searched the community wiki and found this In community forum, so I add server.ts as follows.

import LabMap from "./worlds/maps/lab"
import { RpgServerEngine } from "@rpgjs/server"
import { RpgServer, RpgModule, RpgPlayer } from '@rpgjs/server'

@RpgModule<RpgServer>({
    maps: [
        LabMap, // Register your maps here
    ]
}) export default class RpgServerModuleEngine extends RpgServerEngine {
    static onStart(server: RpgServerEngine) {
        server.sceneMap.createDynamicMap(LabMap);
    }
}

Now the log appears and the the showtext functioned. But the map didn't render on gui. The map is totally black. 2024-11-24 _2_.png
After pressing SPACE to close the 'showtext', I tried to move user around and got Uncaught (in promise) TypeError: undefined has no properties 2024-11-24 _4_.png

my file structure is below. tree -I "node_modules"
.├── Dockerfile ├── index.html ├── main │ ├── database │ ├── events │ │ ├── blueberry.ts │ │ ├── grape.ts │ │ ├── huzhang.ts │ │ └── peanut.ts │ ├── fruit-base-event.ts │ ├── npc-base-event.ts │ ├── player.ts │ ├── server.ts │ ├── spritesheets │ │ ├── characters │ │ │ ├── characters.ts │ │ │ ├── female.png │ │ │ ├── hero.png │ │ │ └── player.png │ │ ├── fruits │ │ │ ├── Blueberry.png │ │ │ ├── Grape.png │ │ │ ├── Huzhang.png │ │ │ ├── Peanut.png │ │ │ └── fruits.ts │ │ └── rabbits │ │ ├── labrabbit.png │ │ └── rabbits.ts │ └── worlds │ ├── maps │ │ ├── LightShadow_pipo.png │ │ ├── [A]Dirt_pipo.png │ │ ├── [A]Dirt_pipo.tsx │ │ ├── [A]Flower_pipo.png │ │ ├── [A]Flower_pipo.tsx │ │ ├── [A]Grass_pipo.png │ │ ├── [A]Grass_pipo.tsx │ │ ├── [A]Wall-Up_pipo.png │ │ ├── [A]Wall-Up_pipo.tsx │ │ ├── [A]WaterFall_pipo.png │ │ ├── [A]WaterFall_pipo.tsx │ │ ├── [A]Water_pipo.png │ │ ├── [A]Water_pipo.tsx │ │ ├── [Base]BaseChip_pipo.png │ │ ├── [Base]BaseChip_pipo.tsx │ │ ├── [Base]BaseChip_pipo3.png │ │ ├── lab.tmx │ │ ├── lab.ts │ │ ├── plain.tmx │ │ ├── simplemap.tmx │ │ └── simplemap2.tmx │ └── myworld.world ├── netlify.toml ├── package-lock.json ├── package.json ├── readme.md ├── rpg.toml ├── tsconfig.json └── vercel.json

Can you help me find out what is going wrong? Or can you give me a Minimal Reproducible Example on how to show text upon "onjoin" a map?