Struggling to Import Scene

Phaser 3
1

Hello all, I’ve been following this tutorial and I’m trying to make an image appear to verify that I’m calling scenes correctly but upon running, all I see is a blank white page and the console displays the following error message:

TitleScene.js:1 Uncaught TypeError: Class extends value undefined is not a constructor or null
at TitleScene.js:1:33

Here’s my code:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Dance Pants Revolution</title>
    <script type="text/javascript" src="phaser.min.js"></script>
    <script type="module" src="./scenes/TitleScene.js"></script>
    <script type="module" src="game.js"></script>
</head>
<body>    
</body>
</html>

game.js

import TitleScene from './scenes/TitleScene.js';

var titleScene = new TitleScene();

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
};

var game = new Phaser.Game(config);
game.scene.add('TitleScene', titleScene);
game.scene.start('TitleScene');

TitleScene.js

class TitleScene extends Phaser.scene {
    constructor () {
        super({key: 'TitleScene'});
    }

    preload() {
        this.load.image('bg', 'assets/bg-title.png');
    }

    create() {
        let background = this.add.sprite(0,0, 'bg');
        background.setOrigin(0, 0);
    }
}

export default TitleScene;

Any ideas what I’m doing wrong here?

Kindly,
Jimmy

2

is telling you

class TitleScene extends undefined {}

i.e., Phaser.scene is undefined. It should be Phaser.Scene.

Also, you need only one module script, because it can import all the others:

<script src="phaser.min.js"></script>
<script type="module" src="game.js"></script>
1 Like
3

Thank you so much!

1 Like