[ts][spine-phaser] Import problem with next.js

[davidetan]

Even though the official next template of phaser works correctly with the spine-phaser runtime, it appears that the user configuration in this thread has problem with imports.

Need to investigate.

[AndonMitev]

Hey @davidetan, just a heads-up that this template is using Next.js 13, but it's still utilizing the pages router instead of the newer app router. This might be causing some issues, especially since the default structure for new Next.js projects changed with version 13. When you initialize a Next.js project after version 13, it typically follows a different structure using the app directory for routing.

Here is a reproducible repo with the problem and latest nextjs version:

https://github.com/AndonMitev/phaser-nextjs

[AndonMitev]

Even further i was able to import it like so:

import 'phaser/plugins/spine/dist/SpinePlugin';

and use it like this:

{ key: 'SpinePlugin', plugin: window.SpinePlugin, mapping: 'spine' },

but then i do face another issue:

    this.load.spineBinary('enemy-skel', '/mini-apps/tip-shot/spine/enemy.skel');
    this.load.spineAtlas(
      'enemy-atlas',
      '/mini-apps/tip-shot/spine/enemy.atlas',
    );

spineBinary and spineAtlas are not a function and indeed when i log this.load this functions to not exists in the object so i feel like SpinePlugin coming from phaser/plugins/spine/dist/SpinePlugin is different than one imported from import { SpinePlugin } from '@esotericsoftware/spine-phaser';

[davidetan]

Yes, they are two different plugins.

[AndonMitev]

Yes, they are two different plugins.

Is it possible to achieve the same results with phaser/plugins/spine/dist/SpinePlugin or not really if so i might try to change my API?

[davidetan]

It's quite old and it definitely does not support the latest Spine 4.2.

[AndonMitev]

It's quite old and it definitely does not support the latest Spine 4.2.

Thank you for the feedback! Yeah looking forward what's the issue with Next and Phaser and the plugin it self

[davidetan]

@AndonMitev Well, the problem was exactly what the error was pointing out. We changed import Phaser from "phaser"; to import * as Phaser from "phaser";.

We commited the changes in 7f6c672911bec9fd3ab3748920dd935bd2081ddf and just pushed 4.2.60 containing the fix. I noticed you used 4.1 in your example project, I also backported it to that version. You can use 4.1.52. I tried it and it finally works with App router too 🎉

Thanks for reporting this 😀

[AndonMitev]

Hey @davidetan, thank you so much!