Error when attempting to import classes

Phaser 3
1

Hey everyone, I’m trying to create my first Phaser project using TypeScript and for whatever reason, as soon as I attempt to create an instance of an Object I created that extends Phaser.GameObjects.Sprite, I get this error:

Uncaught Error: Module name “…/Models/Card.js” has not been loaded yet for context: _. Use require()

And also this one:
Uncaught ReferenceError: MainScene is not defined

I can get it working fine when doing pure javascript, but as soon as I attempt to recreate my project using typescript I cannot get it to run normally. Any idea why that could happen?

2

Hi. What lines of your code are the errors coming from and what are the import statements?

3

The second error is apparently coming from my index.html:

<!DOCTYPE html>
<html>

<head>
    <script>var exports = {};</script>
    <script src="./phaser.js"></script>
    <script src="./require.js"></script>

</head>

<body>

    <script type="module" src="./src/Models/Card.js"></script>
    <script type="module" src="./src/Scenes/MainScene.js"></script>
    <script type="module" src="./src/Scripts/GameManager.js"></script>
    <script>

        var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            scene: MainScene, // **Uncaught ReferenceError: MainScene is not defined**
        };

        const game = new Phaser.Game(config);

        game.events.on("GameCreated", () => {
            new GameManager(game.scene.scenes[0]);
        });

    </script>

</body>

</html>

While the other only appears once I add a line to instantiate a new Card object:


/* START OF COMPILED CODE */
import { Game, Scene } from "phaser";
import Card from "../Models/Card.js";
export default class MainScene extends Phaser.Scene {
// Irrelavent implemenation...
    this.symbol11 = new Card(currentScene, 215.0637664794922, 521.4500732421875, "symbol_6.png", "back", this.onCardFlipped.bind(this));
// Above line gives: Uncaught Error: Module name "../Models/Card.js" has not been loaded yet for context: _. Use require([])
// ...More stuff
4
  • I wouldn’t use exports or require(). These are obsolete.
  • In index.html remove all of the module scripts. Add one module script main.js and in there import the other modules and create the Phaser game. Importing MainScene will eliminate the second error.
  • Use the Phaser global instead of importing from it, unless you’re using a bundler.
  • The first error is coming from the Card module somehow. Maybe removing require will make it clearer.