No longer working with Webpack?

[TorbenTK]

For a new dev project, we're using the lastest versions of Webpack (5.91.0) and Phaser (3.80.1).

I maintain a number of older projects, one of these uses Grid Engine (2.34.0) with an older version of Webpack (5.4.0) but the latest version of Phaser (3.80.1). I don't know what changed recently, but it seems that Grid Engine no longer properly works with the (newer) versions of Webpack.

When I run the project, the following happens:

• The map is created.
• Whenever I call move, moveTo or another function, it throws this.gridEngine.moveTo is not a function
• When logging the plugin's instance (console.info(this.gridEngine)), rather than providing information on the scene, whether it's headless, etcetera, it returns this:

__actions__: [],
__chain__: false,
__index__: 0,
__values__: undefined
__wrapped__: [Object object] (in this case the Scene in question)

I'm not sure where to go from here. I've tried a number of things (see below); the only thing I'm still to try is to manually add it using his.plugins.installScenePlugin to bypass Webpack, but that's not the most ideal solution.

How to reproduce

The easiest way to reproduce it is to use your example project (https://github.com/Annoraaq/grid-engine-ts-example) and then apply the Phaser webpack template on top of it (https://github.com/phaserjs/template-webpack). My project's setup is close to it and I've tested it with the example projects to find out when stuff actually stopped working, which was when Webpack was added.

I did notice is that Phaser console logs that gridEngine as a plugin is missing if imported as { GridEngine }. If that happens, the plugin is indeed undefined and create() fails as well.

Importing as GridEngine instead of { GridEngine } resolves this but allows only(?) create() to work.

Extra information

• My project uses a scene to load data (a BootScene). I added this to the example project and tested, didn't make a difference.
• Whilst I could switch to esbuild for this project, existing projects with Grid Engine unfortunately still require maintenance and rely on webpack for bundle splitting and pre-build texture modifications (tilemap extruding in this case).

[Annoraaq]

Is this problem tied to typescript?

I used https://github.com/phaserjs/template-webpack and added GridEngine (JS only) and I don't get that error message:

https://silver-waddle-vr5vp6vg5jfx5r.github.dev/

This is the first time I am trying codespaces, so let me know if you can't access it.

[TorbenTK]

TypeScript should be fine, but I'll check the codespace example tomorrow just to be sure.

[TorbenTK]

Sorry for the delay. I can't see your example unfortunately. I'm using TypeScript version 5.4.5 for the new project whilst the older project uses TypeScript 4.1.3.

The JS version works fine for me (using template-webpack first, then applying the Basic Movement example from the docs on top of it).

Ran a few more tests for the new project, downgrading to versions that the older functional project uses, weirdly enough I still can't get Grid Engine running (Typescript, Grid Engine, Phaser and Webpack were all downgraded).

Will try again this weekend, keep you posted.

[Annoraaq]

Too bad with the codespace. I guess they are not easily sharable. Anyway, a minimum executable example that demonstrates the issue would be appreciated.