Got this error : Cannot set properties of null (setting 'Sortable1685030262830') TypeError: Cannot set properties of null (setting 'Sortable1685030262830')

[EmanuelFromFlorence]

Version

4.24.2

Description

Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.initSortableAudioLists (http://localhost:3002/static/js/bundle.js:42390:24)
at ReactJkMusicPlayer.componentDidMount (http://localhost:3002/static/js/bundle.js:42885:12)
at invokeLayoutEffectMountInDEV (http://localhost:3002/static/js/bundle.js:33460:26)
at invokeEffectsInDev (http://localhost:3002/static/js/bundle.js:35378:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3002/static/js/bundle.js:35359:9)
at flushPassiveEffectsImpl (http://localhost:3002/static/js/bundle.js:35134:9)
at flushPassiveEffects (http://localhost:3002/static/js/bundle.js:35072:18)
at performSyncWorkOnRoot (http://localhost:3002/static/js/bundle.js:34289:7)
at flushSyncCallbacks (http://localhost:3002/static/js/bundle.js:22326:26)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.initSortableAudioLists (http://localhost:3002/static/js/bundle.js:42390:24)
at ReactJkMusicPlayer.componentDidMount (http://localhost:3002/static/js/bundle.js:42885:12)
at invokeLayoutEffectMountInDEV (http://localhost:3002/static/js/bundle.js:33460:26)
at invokeEffectsInDev (http://localhost:3002/static/js/bundle.js:35378:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3002/static/js/bundle.js:35359:9)
at flushPassiveEffectsImpl (http://localhost:3002/static/js/bundle.js:35134:9)
at flushPassiveEffects (http://localhost:3002/static/js/bundle.js:35072:18)
at performSyncWorkOnRoot (http://localhost:3002/static/js/bundle.js:34289:7)
at flushSyncCallbacks (http://localhost:3002/static/js/bundle.js:22326:26)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.unInstallPlayer (http://localhost:3002/static/js/bundle.js:42367:40)
at ReactJkMusicPlayer.componentWillUnmount (http://localhost:3002/static/js/bundle.js:42877:12)
at callComponentWillUnmountWithTimer (http://localhost:3002/static/js/bundle.js:31540:20)
at safelyCallComponentWillUnmount (http://localhost:3002/static/js/bundle.js:31559:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32621:17)
at recursivelyTraverseDeletionEffects (http://localhost:3002/static/js/bundle.js:32501:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32612:13)
at recursivelyTraverseDeletionEffects (http://localhost:3002/static/js/bundle.js:32501:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32657:13)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.initSortableAudioLists (http://localhost:3002/static/js/bundle.js:42390:24)
at ReactJkMusicPlayer.componentDidMount (http://localhost:3002/static/js/bundle.js:42885:12)
at invokeLayoutEffectMountInDEV (http://localhost:3002/static/js/bundle.js:33460:26)
at invokeEffectsInDev (http://localhost:3002/static/js/bundle.js:35378:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3002/static/js/bundle.js:35359:9)
at flushPassiveEffectsImpl (http://localhost:3002/static/js/bundle.js:35134:9)
at flushPassiveEffects (http://localhost:3002/static/js/bundle.js:35072:18)
at performSyncWorkOnRoot (http://localhost:3002/static/js/bundle.js:34289:7)
at flushSyncCallbacks (http://localhost:3002/static/js/bundle.js:22326:26)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.unInstallPlayer (http://localhost:3002/static/js/bundle.js:42367:40)
at ReactJkMusicPlayer.componentWillUnmount (http://localhost:3002/static/js/bundle.js:42877:12)
at callComponentWillUnmountWithTimer (http://localhost:3002/static/js/bundle.js:31540:20)
at safelyCallComponentWillUnmount (http://localhost:3002/static/js/bundle.js:31559:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32621:17)
at recursivelyTraverseDeletionEffects (http://localhost:3002/static/js/bundle.js:32501:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32612:13)
at recursivelyTraverseDeletionEffects (http://localhost:3002/static/js/bundle.js:32501:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32657:13)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.initSortableAudioLists (http://localhost:3002/static/js/bundle.js:42390:24)
at ReactJkMusicPlayer.componentDidMount (http://localhost:3002/static/js/bundle.js:42885:12)
at invokeLayoutEffectMountInDEV (http://localhost:3002/static/js/bundle.js:33460:26)
at invokeEffectsInDev (http://localhost:3002/static/js/bundle.js:35378:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3002/static/js/bundle.js:35359:9)
at flushPassiveEffectsImpl (http://localhost:3002/static/js/bundle.js:35134:9)
at flushPassiveEffects (http://localhost:3002/static/js/bundle.js:35072:18)
at performSyncWorkOnRoot (http://localhost:3002/static/js/bundle.js:34289:7)
at flushSyncCallbacks (http://localhost:3002/static/js/bundle.js:22326:26)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.initSortableAudioLists (http://localhost:3002/static/js/bundle.js:42390:24)
at ReactJkMusicPlayer.componentDidMount (http://localhost:3002/static/js/bundle.js:42885:12)
at invokeLayoutEffectMountInDEV (http://localhost:3002/static/js/bundle.js:33460:26)
at invokeEffectsInDev (http://localhost:3002/static/js/bundle.js:35378:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3002/static/js/bundle.js:35359:9)
at flushPassiveEffectsImpl (http://localhost:3002/static/js/bundle.js:35134:9)
at flushPassiveEffects (http://localhost:3002/static/js/bundle.js:35072:18)
at performSyncWorkOnRoot (http://localhost:3002/static/js/bundle.js:34289:7)
at flushSyncCallbacks (http://localhost:3002/static/js/bundle.js:22326:26)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.unInstallPlayer (http://localhost:3002/static/js/bundle.js:42367:40)
at ReactJkMusicPlayer.componentWillUnmount (http://localhost:3002/static/js/bundle.js:42877:12)
at callComponentWillUnmountWithTimer (http://localhost:3002/static/js/bundle.js:31540:20)
at safelyCallComponentWillUnmount (http://localhost:3002/static/js/bundle.js:31559:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32621:17)
at recursivelyTraverseDeletionEffects (http://localhost:3002/static/js/bundle.js:32501:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32612:13)
at recursivelyTraverseDeletionEffects (http://localhost:3002/static/js/bundle.js:32501:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32657:13)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.initSortableAudioLists (http://localhost:3002/static/js/bundle.js:42390:24)
at ReactJkMusicPlayer.componentDidMount (http://localhost:3002/static/js/bundle.js:42885:12)
at invokeLayoutEffectMountInDEV (http://localhost:3002/static/js/bundle.js:33460:26)
at invokeEffectsInDev (http://localhost:3002/static/js/bundle.js:35378:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3002/static/js/bundle.js:35359:9)
at flushPassiveEffectsImpl (http://localhost:3002/static/js/bundle.js:35134:9)
at flushPassiveEffects (http://localhost:3002/static/js/bundle.js:35072:18)
at performSyncWorkOnRoot (http://localhost:3002/static/js/bundle.js:34289:7)
at flushSyncCallbacks (http://localhost:3002/static/js/bundle.js:22326:26)
ERROR
Cannot set properties of null (setting 'Sortable1685030262830')
TypeError: Cannot set properties of null (setting 'Sortable1685030262830')
at Sortable.destroy (http://localhost:3002/static/js/bundle.js:50280:17)
at ReactJkMusicPlayer.unInstallPlayer (http://localhost:3002/static/js/bundle.js:42367:40)
at ReactJkMusicPlayer.componentWillUnmount (http://localhost:3002/static/js/bundle.js:42877:12)
at callComponentWillUnmountWithTimer (http://localhost:3002/static/js/bundle.js:31540:20)
at safelyCallComponentWillUnmount (http://localhost:3002/static/js/bundle.js:31559:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32621:17)
at recursivelyTraverseDeletionEffects (http://localhost:3002/static/js/bundle.js:32501:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32612:13)
at recursivelyTraverseDeletionEffects (http://localhost:3002/static/js/bundle.js:32501:9)
at commitDeletionEffectsOnFiber (http://localhost:3002/static/js/bundle.js:32657:13)

Steps

/**
 * code
 */

Reproduce Link

Steps to Reproduce

Simply yarn install as instruction
an App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Audio from './audio';

const App = () => {
return (

);
};

ReactDOM.render(, document.getElementById('root'));

export default App;

and and an

audio.js

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

const Audio = () => {
const audioList = [
{
name: 'Song 1',
singer: 'Artist 1',
cover: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg',
musicSrc: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
},
{
name: 'Song 2',
singer: 'Artist 2',
cover: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg',
musicSrc: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
},
// Add more songs to the audioList array as needed
];

return (
<ReactJkMusicPlayer
audioLists={audioList}
mode="full"
defaultPlayIndex={0}
showDownload={false}
customProgressBar={(
<div
className="custom-progress-bar"
style={{
width: '100%',
height: '100%',
borderRadius: '50%',
background: '#ccc',
overflow: 'hidden',
}}
/>
)}
renderCover={(audioInfo) => (
<div
style={{
width: '100%',
height: 0,
paddingBottom: '100%',
position: 'relative',
overflow: 'hidden',
borderRadius: '50%',
}}
>
<img
src={audioInfo.cover}
alt="Cover"
style={{
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
objectFit: 'cover',
}}
/>

)}
/>
);
};

export default Audio;

Expected Behavior

to ...work without any warning? i mean it starts but briefly first i have that message

Current Behavior

runtime error

cannot achieve it

System information

Node 20 , React 19 , Monterey latest , Brave ,Edge ,Safari, Arc,Vs code latest all

Comments

[CoderRCAman]

Remove
<React.StrictMode> </React.StrictMode>
Should work!

[EmanuelFromFlorence]

it was the double strict mode i had...wiped this player started to work https://vercel.com/emanuelfromflorence/my-app/xejPP6N1JzCYfQQfbTUWmsYtJDQa

[k2xl]

Same issue - any other workarounds?