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.

[TorbenTK]

I've created a repo for the issue:
https://github.com/TorbenTK/499-grid-engine-webpack-issue

Codespaces apparently cannot be shared unless explicitly invited for collaboration to said repo, however you can create a codespace from the repository.

This is effectively the same setup as in my OP message but with some changes to make it closer to existing setup of the latest project. Should work with either npm or yarn.

[Annoraaq]

Not sure if I did anything wrong but I cloned your repo and then ran
npm i and then npm run serve.
I don't get any error message and can run the "game" without any problems.

[TorbenTK]

npm run webpack runs the problematic webpack version. npm run serve runs esbuild which works fine.

A final thing I'm testing (as a workaround) is to use esbuild-loader instead of the babel-loader and ts-loader. Given the JS example works it may indeed be TS screwing things up somewhere in the build.

UPDATE: using esbuild-loader makes it so webpack works fine. Either babel-loader or ts-loader is causing trouble.

[TorbenTK]

Update:

After some testing with one of the older projects, the problem indeed seems to be TypeScript related, namely in how ts-loader tries to compile (newer) versions of GridEngine to JavaScript from TypeScript. I haven't done a full deep dive on what it does different and how the builds compare, just that it creates something that doesn't gel well with Phaser afterwards.

Using the latest of everything (webpack, phaser, GridEngine) with esbuild-loader works like a charm. That for me is already great because switching out one loader for another doesn't break the setup for existing projects.

Comparison, in case you want to investigate further:

• New working setup: webpack 5.91.0, phaser 3.80.1, grid-engine 2.45.2, esbuild-loader 4.2.2
• Old working setup: webpack 5.4.0, phaser 3.60.0, grid-engine 2.34.0, ts-loader 8.0.12 and babel-loader 8.2.1

[Annoraaq]

Thanks for figuring out a workaround.

I can reproduce it, but I have no idea what is causing this yet. Let me know if the workaround stops working or if you found a solution.