Spine and Reactjs issues error @esotericsoftware/spine-player' does not contain a default export (imported as 'spine')

Question

I want embedded then Spine 2d into Reactjs app, When I read Spine documents, they offer import spine from '@esotericsoftware/spine-player'; but I render app it issues a error: Attempted import error: '@esotericsoftware/spine-player' does not contain a default export (imported as 'spine').

My code:

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

const Character = () => {

    var jsonUrl = 'assets/Vi.json';
    var atlasUrl = 'assets/Vi.atlas';
    
    new spine.SpinePlayer('player-container', {
        jsonUrl: jsonUrl,
        atlasUrl: atlasUrl,
        animation: 'jump',
        premultipliedAlpha: true,
        backgroundColor: '#cccccc',
        viewport: {
            debugRender: true,
        },
        showControls: true,
    });

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

Answer 1

I solved this problem like this in my case. There is no exported member named spine in spine-player.

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>;
};