How to import a Glitch Assets folder image for a Phaser 3 external javascript file named sceneMain.js

[laserblue]

I’m working with Phaser 3, Node.js, Express and the photonstorm phaser3-project-template (phaser3-project-template - npm).
This template allows use of ES6 and Webpack (which may be a deprecated version like Webpack 3 as I’m getting a lot of Node.js/npm deprecated file messages)
I have the template working with an image from the Glitch assets folder rather than from the provided src/assets folder but can’t seem to get the code to work for a modular external sceneMain.js file in the src/scenes folder. I thought I had it working once, but I changed something and don’t remember how I coded it to make it work and I’m not sure at what point in rewind the import code was working to rewind to.

The preview takes quite a long time to display so I wonder if Webpack is properly configured or the template is interfering with the Glitch auto reloading.

The error in the logs seems to be about a path setting.
ERROR in ./src/scenes/sceneMain.js

11:15 AM

Module not found: Error: Can’t resolve ‘./assets/logo.png’ in ‘/app/src/scenes’

11:15 AM

@ ./src/scenes/sceneMain.js 26:0-40 45:30-37

11:15 AM

@ ./src/index.js

11:15 AM

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

1. Using Glitch there seems to be a need to put a comment regarding globals on the top line (not sure this is currently correct for ESLint) e.g. // global Phaser, sceneMain.js
2. tutorials usually have a line in index.js to import an image from a path and file but I’m not sure how this should be coded with the Glitch Assets folder CDN URL.
3. putting ‘export default SceneMain;’ at the end of sceneMain.js seemed to work the first time
4. With ES5 I have to put external javascript filenames in a script file in index.html in the head or body. Doesn’t seem necessary for ES6.
   index.js
   import Phaser from ‘phaser’; // seems to work with either double or single quotes

const config = {
type: Phaser.AUTO,
parent: “phaser-example”,
width: 800,
height: 600,
// scene: [ SceneMain ] // turn this on Step 2 when importing sceneMain.js
//};

scene: { // delete this when importing sceneMain.js and replace with scene: [ SceneMain ]
preload: preload,
create: create
}

};

const game = new Phaser.Game(config);
// const game = new Game(config);

// delete this section when importing sceneMain.js
function preload() {
this.load.image( ‘logo’, ‘https://cdn.glitch.global/5946c0e4-5977-405c-ad1d-c71bc52f56f4/USGS-PlanetMars-TopographicalMap.png?v=1642877985728’); // turn OFF 2
// this.load.image(“logo”, logoImg); // turn ON 2
}

function create() {
// const logo = this.add.image(400, 150, “logo”);// turn OFF 3
const logo = this.add.image(400, 150, “logo”); // turn ON 3
this.tweens.add({
targets: logo, // change 4 logo to map
y: 450,
duration: 2000,
ease: “Power2”,
yoyo: true,
loop: -1
});

}

sceneMain.js
// global sceneMain.js
// glitch uses a linter that requires a commented statement regarding globals at top of file
import Phaser from ‘phaser’;
import { Scene } from ‘phaser’; // ? use single or double quotes??
// import logo from ‘https://cdn.glitch.global/5946c0e4-5977-405c-ad1d-c71bc52f56f4/1024px-PIA23302-FirstHumansOnMars-ArtistConcept.jpg?v=1642877975676’;
// import logoImg from “./assets/logo.png”;// ? use single or double quotes??

// Add a scene in Phaser 3 using NPM (Add a scene in Phaser 3 using NPM - YouTube) William Clarkson
// Phaser 3 - Adding Images with NPM and Webpack Phaser 3 - Adding Images with NPM and Webpack - YouTube
// export class SceneMain extends Phaser.Scene {
class SceneMain extends Phaser.Scene { // use if add export default SceneMain at end of file?
constructor() { //color picker square keeps appearing before constructor
super(‘SceneMain’); // leave empty?
}
//class SceneMain extends Scene {

preload()
{
this.load.image( ‘logo’, ‘https://cdn.glitch.global/5946c0e4-5977-405c-ad1d-c71bc52f56f4/1024px-PIA23302-FirstHumansOnMars-ArtistConcept.jpg?v=1642877975676’); // turn OFF 2
// this.load.sceneFile(‘sceneMain’, ‘js/SceneMain.js’);
// this.load.image(“logo”, logoImg);
// this.load.image(“logo”, “assets/logo.png”)
}
create()
{
console.log(“Ready!”);

const logo = this.add.image(400, 150, "logo");

this.tweens.add({
  targets: "logo",
  y: 450,
  duration: 2000,
  ease: "Power2",
  yoyo: true,
  loop: -1
});

this.scene.start(SceneMain);
}
update()
{

}
}

export default SceneMain;