• RuntimesBugs

  • SpinePlugin failing to import Phaser

    inglés

I'm using following stack:

"next": "14.2.0"
"phaser": "^3.85.1",
"@esotericsoftware/spine-phaser": "^4.2.59",

And this is my setup of phaser && spine-phaser

import { AUTO, Game } from 'phaser';

import { SpinePlugin } from '@esotericsoftware/spine-phaser';

const config: Phaser.Types.Core.GameConfig = {
  type: AUTO,
  width: 1920,
  height: 1080,
  parent: 'game-container',
  backgroundColor: '#4488aa',
  transparent: false,
  scene: [],
  plugins: {
    scene: [
      {
        key: 'spine.SpinePlugin',
        plugin: SpinePlugin,
        mapping: 'spine',
      },
    ],
  },
  fps: {
    forceSetTimeOut: true,
    target: 60,
  },
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
};

const StartGame = (parent: string) => {
  return new Game({ ...config, parent });
};

export default StartGame;

Usage;

'use client';

import StartGame from '@/lib/utils/test';
import { useEffect } from 'react';

export default function Playground() {
  useEffect(() => {
    StartGame('game-container');
  }, []);
  return <div id="game-container">Playground</div>;
}

But when trying to execute is throwing following error:

Import trace for requested module:
./node_modules/@esotericsoftware/spine-phaser/dist/SpinePlugin.js
./node_modules/@esotericsoftware/spine-phaser/dist/index.js
./lib/utils/test.ts
./app/mini-apps/components/Playground.tsx
 ✓ (serwist) Bundling the service worker script with the URL '/sw.js' and the scope '/'...
 ⨯ ./node_modules/@esotericsoftware/spine-phaser/dist/SpinePlugin.js
Attempted import error: 'phaser' does not contain a default export (imported as 'Phaser').

in this file SpinePlugin.js is failing to import phaser as it says there is no default export but we do know such exists, I've tried adding this into next.config.mjs:

transpilePackages: ['@esotericsoftware/spine-phaser'],

but no change, any idea what can be the issue?

Related Discussions
...

I've cloned the official phaser nextjs template, imported spine-phaser as our documentation specify, and it works correctly.

Can you create a minimal reproduction project where I just need to npm i to see the error, and attach it to this thread? Otherwise I cannot reproduce it 🙁

    Davide Hey dude yeah i've just cloned template as well and is working as expected, yes i will try to create minimal reproducible repository in a bit 🙏

      I will create an issue on github and give it a watch in the next days.

      Meanwhile it would be appreciated if you were able to compare the phaser next template with your code and see the differences.

      Here the issue: EsotericSoftware/spine-runtimes2629

        • 00xdoni

          • Publicación n.º 7
          • Editado
          • Publicación en inglés

          Davide

          Yeah so i can see that provided template is using legacy nextjs with pages etc if that can be the reason but yeah i'll take a look as well, also something else that i can see is in next.config.mjs that template has

          /** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    distDir: 'dist'
};

export default nextConfig;

          but this will output static dist folder and in new nextjs above 13 behaviour is different