Trouble getting a Phaser 3 player.js file to work

I’m working with Phaser 3 and Node.js and I’m having trouble getting my Player class defined in an external player.js file to work and just show the player sprite on the screen.
I have no problem loading, creating and moving the player sprite when I define the class in the scene file. I want to use an external player.js file instead.
I got what I want to do working on Replit but the same code does not work on Glitch. How do I rule out the Linter which required me to add // global Scene1, Scene2, Scene3 etc.? Is it ‘this’? Is it something else?
The code from a tutorial that I used on Replit (Phaser 3 Tutorial + Template - Replit) did not work until I added some ‘this’ code. However, I finally got it to work on Replit. Now I’m trying to hunt down why the same code in the scene1.js file and the player.js file won’t show the player sprite onscreen in Glitch.

player.js on Replit

export default class Player extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y, player) {
        super(scene, x, y, player);

        scene.add.existing(this);
        scene.physics.add.existing(this);
        this.body.collideWorldBounds = true;
    };
    move(up, left, down, right) {
        if(up.isDown) this.y--
        if(left.isDown) this.x--
        if(down.isDown) this.y++
        if(right.isDown) this.x++
    };
};

Game.js
import Phaser from ‘phaser’;
import { game } from ‘…/main’; // one possibility for the cause of the troubles is getting this path right with Glitch and my scene.js file

import { CONFIG_WIDTH, CONFIG_HEIGHT } from ‘…/constants’;
import AuthorNPC from ‘…/objects/authors.js’;
import Player from ‘…/objects/player.js’;

let logo;
let player;
let author;
let cursors;
let text;

export default class Demo extends Phaser.Scene {
constructor() {
super(‘GameScene’);//super({key:“game”});
} // };

preload() {
this.load.image(‘logo’, ‘assets/images/Replit-logo.png’);
this.load.spritesheet(‘author’, ‘assets/images/rpg_sprite_walk.png’, {frameWidth: 24, frameHeight: 32 });
this.load.spritesheet(‘player’, ‘assets/images/penguin.png’, {frameWidth: 120, frameHeight: 256 });
}

create() {
logo = this.physics.add.sprite(CONFIG_WIDTH / 2, CONFIG_HEIGHT / 2, ‘logo’);
logo.setBounce(0.5);
logo.setCollideWorldBounds(true);
this.player = new Player(this, 200, 50, ‘player’);
this.player.setScale(0.5);
for (var i = 0; i < 10; i++) {
let xx = Phaser.Math.Between(0, CONFIG_WIDTH);
let yy = Phaser.Math.Between(0, CONFIG_HEIGHT);
this.author = new AuthorNPC(this, xx, yy, ‘author’)
this.author.setScale(3);
}
// add name labels from a list
// add name labels from an sqlite database

// add mobile movement for player (pointer or swipe etc.)

// player = this.physics.add.sprite(300, 0, 'player', 0);

// this.player.setScale(3);
// this.player.setBounce(0.5);
// this.player.setCollideWorldBounds(true);// doesn’t work

cursors = this.input.keyboard.createCursorKeys();

… more code about text and updating movement

check the browser console for error messages

How do I rule out the Linter which required me to add // global Scene1, Scene2, Scene3 etc.?

the browser treats those as code comments, so they don’t affect whether the program works or not

on Replit … did not work until I added some ‘this’ code

should be the same on glitch, because this code doesn’t run on replit nor glitch, it runs in the visitor’s browser

I have no problem loading, creating and moving the player sprite when I define the class in the scene file. I want to use an external player.js file instead.

was the first sentence of this part about it working on Glitch?

I got it to work!! Thank you for your help!!
Lesson: pay attention to console warnings and DON’T CHANGE too much CODE when debugging.
The problem was that I did not have the word ‘default’
export default class Player extends Phaser.GameObjects.Sprite {
I had export class Player extends Phaser.GameObjects.Sprite {

WARNING in ./src/scenes/introScene.js 148:24-30

12:39 PM

"export ‘default’ (imported as ‘Player’) was not found in ‘./player.js’ ///!!! Thank you!! WHY???
It doesn’t work BECAUSE you need to add the word ‘default’.
Solution: export default class Player extends Phaser.GameObjects.Sprite {
Actually, I first had to correct some code I changed to match the Replit code again and get back to where the NPC sprite was loading in ok. Then I tried adding the player sprite and based on the console warning I added default after export.
12:39 PM

@ ./src/index.js

12:39 PM

Child html-webpack-plugin for “index.html”:

12:39 PM

1 asset

12:39 PM

Entrypoint undefined = index.html

12:39 PM

[…/rbd/pnpm-volume/5946c0e4-5977-405c-ad1d-c71bc52f56f4/node_modules/.registry.npmjs.org/html-webpack-plugin/3.2.0/node_modules/html-webpack-plugin/lib/loader.js!./index.html] /rbd/pnpm-volume/5946c0e4-5977-405c-ad1d-c71bc52f56f4/node_modules/.registry.npmjs.org/html-webpack-plugin/3.2.0/node_modules/html-webpack-plugin/lib/loader.js!./index.html 399 bytes {0} [built]

12:39 PM

[…/rbd/pnpm-volume/5946c0e4-5977-405c-ad1d-c71bc52f56f4/node_modules/.registry.npmjs.org/lodash/4.17.21/node_modules/lodash/lodash.js] /rbd/pnpm-volume/5946c0e4-5977-405c-ad1d-c71bc52f56f4/node_modules/.registry.npmjs.org/lodash/4.17.21/node_modules/lodash/lodash.js 531 KiB {0} [built]

12:39 PM

[…/rbd/pnpm-volume/5946c0e4-5977-405c-ad1d-c71bc52f56f4/node_modules/.registry.npmjs.org/webpack/4.46.0/node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]

12:39 PM

[…/rbd/pnpm-volume/5946c0e4-5977-405c-ad1d-c71bc52f56f4/node_modules/.registry.npmjs.org/webpack/4.46.0/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

Yes, the question about the linter (ESLint?) was about Glitch. In order to get my scenes running I had to add the scene class name after the word global in a comment on the top line. I’m wondering if I also need to add Player or player.js as well to the global list. So, I’m trying to check that the player.js file is loading when I create the player object. When I load the player spritesheet from the just the scene file, there is no problem and the sprite appears on the screen (just as an added sprite not as a new Player object instance. Then if that’s o.k., I’m trying to check the code in player.js regarding use of the ‘this’ keyword. The code in the tutorial that I used on Replit didn’t work at first until I added the keyword ‘this’ to some lines. The same code doesn’t appear to work on Glitch and I’m trying to figure out what is going on. Something I noticed was a misplaced comma in the code for an NPC spritesheet I’m loading and yet the code works and puts the NPC on the screen. Is that sprite interfering with the player sprite somehow? Is the problem that I need to load or create the player sprite last? I’m trying to isolate the error.
Maybe the following is the root of the problem(???).
main.js on Replit
import Phaser from ‘phaser’;
import config from ‘./config’;
import GameScene from ‘./scenes/Game’;

// on Replit, game is imported to the scene file
export const game = new Phaser.Game(
Object.assign(config, {
scene: [GameScene]
})
);
ON GLITCH: index.js
import Phaser from ‘phaser’; // seems to work with either double or single quotes
import {BootScene} from ‘./scenes/bootScene.js’;
import {MenuScene} from ‘./scenes/menuScene.js’;
import {GameScene} from ‘./scenes/gameScene.js’;
import {IntroScene} from ‘./scenes/introScene.js’;
import {OptionsScene} from ‘./scenes/optionsScene.js’;
import {CreditsScene} from ‘./scenes/creditsScene.js’;

//import {SceneMain} from ‘./scenes/sceneMain.js’;

const config = {
type: Phaser.AUTO,
parent: ‘phaser-example’,
width: 800,
height: 600,
scene: [BootScene, MenuScene, GameScene, IntroScene, OptionsScene, CreditsScene],
physics: {
default: ‘arcade’,
arcade: {
debug: true
}
},
};
const game = new Phaser.Game(config); // Replit code creates a config object that is exported to the scene file.

that’s great to hear

good luck on the lint situation. I get the feeling Glitch much more limited compared to Replit in how it lints things because it has to run it in the browser.