TypeError: _sortablejs.Swap is not a constructor

[pradeepjain06]

Version

tested on 4.22.1

Description

Steps

code added like this

import ReactJkMusicPlayer from 'react-jinke-music-player'
import 'react-jinke-music-player/assets/index.css'

export default function Audio(){
    return(
        <ReactJkMusicPlayer {...options} />
    )
}

I have added this code in a route of my NextJS app. App is not compiling successfully after adding this and getting this error.

[lijinke666]

https://github.com/lijinke666/react-music-player#bulb-server-side-rendering

[eltel]

Hi, I'm also having exactly this problem on NextJS, I followed installation instructions to the letter and then added the code for SSR from @lijinke666 's answer - and I'm still getting the "TypeError: _sortablejs.Swap is not a constructor" error.

Here's my console in case it can help:

TypeError: _sortablejs.Swap is not a constructor
    at Object.<anonymous> (/home/terrymitchell/Documents/Dev/projects/Timeline 4.0/timeline-music-4-master/node_modules/react-jinke-music-player/lib/index.js:120:30)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.react-jinke-music-player (/home/terrymitchell/Documents/Dev/projects/Timeline 4.0/timeline-music-4-master/.next/server/pages/audio-only.js:706:18)
    at __webpack_require__ (/home/terrymitchell/Documents/Dev/projects/Timeline 4.0/timeline-music-4-master/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/players/AudioPlayer.js:9:82)

Any help would be greatly appreciated as this looks like an awesome player.

Cheers

Terry

[isaacwgarcia]

Hi, I'm also having exactly this problem on NextJS, I followed installation instructions to the letter and then added the code for SSR from @lijinke666 's answer - and I'm still getting the "TypeError: _sortablejs.Swap is not a constructor" error.

Here's my console in case it can help:

TypeError: _sortablejs.Swap is not a constructor
    at Object.<anonymous> (/home/terrymitchell/Documents/Dev/projects/Timeline 4.0/timeline-music-4-master/node_modules/react-jinke-music-player/lib/index.js:120:30)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.react-jinke-music-player (/home/terrymitchell/Documents/Dev/projects/Timeline 4.0/timeline-music-4-master/.next/server/pages/audio-only.js:706:18)
    at __webpack_require__ (/home/terrymitchell/Documents/Dev/projects/Timeline 4.0/timeline-music-4-master/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/players/AudioPlayer.js:9:82)

Any help would be greatly appreciated as this looks like an awesome player.

Cheers

Terry

if anyone is having the same issue declare PlayerWithNoSSR only in the page that is importing the component not in _app.js

const PlayerWithNoSSR = dynamic(() => import("../components/Player"), {
ssr: false,
});

and call PlayerWithNoSSR instead of Player

Also declare Player as a

const Player = () => ()
export default Player

Hope that helps!

[0xevm1]

this works for bun run dev but doesn't work for bun run build