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', }} />

[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?