Spine with React.js / Next.js

bgfborges

I've problem running spine in my next application. It seems to be a problem of different versions.

import React from 'react';
import { SpinePlayer } from '@esotericsoftware/spine-player';

const Character = () => {

var jsonUrl = 'assets/Vi.json';
var atlasUrl = 'assets/Vi.atlas';

new SpinePlayer('player-container', {
    jsonUrl: jsonUrl,
    atlasUrl: atlasUrl,
    animation: 'jump',
    premultipliedAlpha: true,
    backgroundColor: '#cccccc',
    viewport: {
        debugRender: true,
    },
    showControls: true,
});

return <div id="player-container"></div>;

};

It sounds to be working for other people. But for me, it throws error "unexpected token export". If I change the core code on this line, it pass to the next, and then I understood the error was because the syntax of ES6. My application runs as ES6.

bgfborges

Nate

Please show the error you get.

You changed what line?

Why does it seem to be a problem with different versions? Make sure you the editor version you exported with matches the runtime version.
Versioning - Spine User Guide: Synchronizing versions

bgfborges

With my given example, it throws the following error on terminal:

export * from './Player';
^^^^^^

SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1032:15)
at Module.compile (node:internal/modules/cjs/loader:1067:27)
at Object.Module.extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Promise.all (index 0) {
page: '/'
}

and the following error on the browser:

Server Error
SyntaxError: Unexpected token 'export'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
/Volumes/HD/rocketseat/starter-webapp/new-starter-kit/spine-test/spine/node_modules/ (esotericsoftware/spine-player/dist/index.js (1)
Object.compileFunction
node:vm (352:18)
wrapSafe
node:internal/modules/cjs/loader (1032:15)
Module._compile
node:internal/modules/cjs/loader (1067:27)

[.....]

But if I change this line of code (export * from './Player'😉 to this (just as example to understand):

const spine = require('./Player')
module.exports = { SpinePlayer: spine.SpinePlayer }

Then this error pass to the next:

export * from "@esotericsoftware/spine-core";
^^^^^^

SyntaxError: Unexpected token 'export'

I've checked the versions: well, my team member is exporting the files from 4.0 and 4.1, and neither works with the latest versions of these packages:

npm install @esotericsoftware/spine-core
npm install @esotericsoftware/spine-canvas
npm install @esotericsoftware/spine-webgl
npm install @esotericsoftware/spine-player
npm install @esotericsoftware/spine-threejs

I'm not sure if the package versions is the same as the versions in github, that's it? Anyway, right now I'm going to downside the packages and test it.

Mario

This is not a Spine issue, but a React/JS modules issue. I'm not super familiar with React's build pipeline. We ship spine as both ES6 modules and as old style self-contained JS libraries.

From your error logs it seems that you are trying to use Spine with the CommonJS module system. Please use ES6 modules.

bgfborges

Thanks for supporting me. I still didn't solve this problem, but I see that NextJS isn't using CommonJS, but "module": "esnext", in the tsconfig.json. That's something defined by default by NextJS. And doesn't matter if I change this line, when the application start this is auto defined again to "esnext". As long as this problem looks to be related to NextJS and the possibilities of external workspace, I totally understand that's not a problem of your library, and I keep looking how to solve this issue.

cafecommuter

Hi bgfborges if you are using NextJS v13 you need to add the package to the transpilePackages option in the next.config.js. Like so:

// next.config.js

const nextConfig = {
  ...
  // Add the runtime you are using.
  transpilePackages: ['@esotericsoftware/spine-threejs'],
};

module.exports = nextConfig;

If you are using an older version of NextJS then you need to use the next-transpile-modules plugin.

engreric

Try this.
Note that the playbloy file path is outside the src folder. it should be in the project root.

import { useEffect, useRef } from 'react';

const atlasUrl = 'playbloy/spineboy-pma.atlas'
const jsonUrl = 'playbloy/spineboy-pro.json'
const SpineAnimation = () => {

    const playerContainerRef = useRef(null);

    useEffect(() => {
      if (playerContainerRef.current) {
        
        new SpinePlayer("player-container",{
          jsonUrl: jsonUrl,
          atlasUrl: atlasUrl,
          animations: ["run"],
          showControls: false,
          preserveDrawingBuffer: false
        }).play();
      }
    }
  , []);
  
    return (
      <div id="player-container" ref={playerContainerRef} style={{ width: '20%', height: '70vh' }} />
    );
    }
export default SpineAnimation;