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.
  • Postovi: 3


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

  • Postovi: 12131


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 (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
/Volumes/HD/rocketseat/starter-webapp/new-starter-kit/spine-test/spine/node_modules/ (esotericsoftware/spine-player/dist/index.js (1)
node:vm (352:18)
node:internal/modules/cjs/loader (1032:15)
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.
  • Postovi: 3


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.

  • Postovi: 3242


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.
  • Postovi: 3

Natrag na Runtimes