Phaser not loading my tilemap, only showing black screen

I am trying to load a tilemap created in tiled map editor. I have exported it as a json file and have it in an assets folder within the public folder, along with my tilesheet. All that is being displayed on the canvas is black. I have tried to change the position of the camera to see if that makes a difference but it doesn't. I am getting no errors and on the network tab I can see that the map and tilesheet are being loaded. I cannot for the life of me find an answer that works for this issue.

My main.js

var config = {
  type: Phaser.CANVAS,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create,
    update: update,
  },
  render() {
    Phaser.Renderer.CANVAS
  },
}

var game = new Phaser.Game(config)

function preload() {
  console.log('preload')
  // Load assets here
  this.load.setBaseURL('http://localhost:5500/public/assets/')
  this.load.tilemapTiledJSON('map', 'map.json')
  this.load.image('tiles', 'Tileset.png')
}

function create() {
  // Set up game objects and logic here
  const map = this.make.tilemap({ key: 'map' })
  const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')
  console.log(tileset)
  const layer = map.createLayer('Tile Layer 1', tileset, 0, 0)

  // Center the layer
  const width = layer.widthInPixels
  const height = layer.heightInPixels
  layer.setPosition(
    game.config.width / 2 - width / 2,
    game.config.height / 2 - height / 2
  )

  // Set up the camera to show the relevant portion of the map
  this.cameras.main.setBounds(0, 0, game.config.width, game.config.height)
  this.cameras.main.centerOn(map.widthInPixels / 2, map.heightInPixels / 2)
}

function update() {
  // Update game state here
}

My index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Phaser Game</title>
  </head>
  <body>
    <canvas id="game"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

I have logged the tileset and map out and both are loading the objects correctly. Any help would be greatly appreciated

EDIT: I have also cloned a repo that is supposed to work from github and I am having the same issue with their code. Really not sure what is going on. This is the repo that I have checked from github: https://github.com/ourcade/phaser3-dungeon-crawler-starter

Solution

Apart from the render function in the config, that I don't understand, everything seems okay. You could check the names of the Layer and Tileset in the JSON/Tiled and your code if they match (watch out for spaces and the correct case). This can cause the map not to be drawn. Especially the statements:

const map = this.make.tilemap({ key: 'map' })
- here the map key
const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')
- here the RPG_Tileset and tiles
const layer = map.createLayer('Tile Layer 1', tileset, 0, 0)
- here the Tile Layer 1

Even a missing trailing space can make the creation fail.

btw.: have you downloaded the the zip SourceWithAssets.zip file from here https://github.com/ourcade/phaser3-dungeon-crawler-starter/releases/tag/latest OR used git-lfs as mentioned in the readme.md? if so, this should work, I just did it and it works. If it doesn't be sure to update your node and/or npm version and as mentioned in the readme execute teh command npm install in the main folder.