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?
