Uncaught TypeError: Cannot read properties of undefined (reading '0') at Howl.rate

[rymdmetafor]

When having a variable set the volume of the useSound hook, sometimes changing the variable changes the volume, but sometimes it throws this error:

Uncaught TypeError: Cannot read properties of undefined (reading '0') at Howl.rate (howler.js:1564:1) at index.ts:94:1 at commitHookEffectListMount (react-dom.development.js:23150:1) at commitPassiveMountOnFiber (react-dom.development.js:24926:1) at commitPassiveMountEffects_complete (react-dom.development.js:24891:1) at commitPassiveMountEffects_begin (react-dom.development.js:24878:1) at commitPassiveMountEffects (react-dom.development.js:24866:1) at flushPassiveEffectsImpl (react-dom.development.js:27039:1) at flushPassiveEffects (react-dom.development.js:26984:1) at commitRootImpl (react-dom.development.js:26935:1)

"volume" is a useState variable. But if I make it a normal variable and change the value of it it gives me the same error. The error message seems to be about the "rate". I have tried setting a playbackrate but it did not resolve the issue. The error appears when the "volume" variable changes, but not every time. When logging the type of the "volume" variable before the declaration of the useSound hook, it returns "number", not "undefined".

const [playPiano] = useSound(currentsound, {
      volume : volume,
      sprite: {
    0:  [0, 3000],
          1:  [4800, 3000],
          2:  [9600, 3000],
          3:  [14400, 3000],
          4:  [19200, 3000],
          5:  [24000, 3000],
          6:  [28800, 3000],
          7:  [33600, 3000],
          8:  [38400, 3000],
          9:  [43200, 3000],
          10: [48000, 3000],
          11: [52800, 3000],
          12: [57600, 3000],
          13: [62400, 3000],
          14: [67200, 3000],
          15: [72000, 3000],
          16: [76800, 3000],
          17: [81600, 3000],
          18: [86400, 3000],
          19: [91200, 3000],
          20: [96000, 3000],
          21: [100800, 3000],
          22: [105600, 3000],
          23: [110400, 3000],
          24: [115200, 3000],
          25: [120000, 3000],
          26: [124800, 3000],
          27: [129600, 3000],
          28: [134400, 3000],
          29: [139200, 3000],
          30: [144000, 3000],
          31: [148800, 3000],
          32: [153600, 3000],
          33: [158400, 3000],
          34: [163200, 3000],
          35: [168000, 3000],
          36: [172800, 3000],
          37: [177600, 3000],
          38: [182400, 3000],
          39: [187200, 3000],
          40: [192000, 3000],
          41: [196800, 3000],
          42: [201600, 3000],
          43: [206400, 3000],
          44: [211200, 3000],
          45: [216000, 3000],
          46: [220800, 3000],
          47: [225600, 3000],
          48: [230400, 3000],
          49: [235200, 3000],
          50: [240000, 3000],
          51: [244800, 3000],
          52: [249600, 3000],
          53: [254400, 3000],
          54: [259200, 3000],
          55: [264000, 3000],
          56: [268800, 3000],
          57: [273600, 3000],
          58: [278400, 3000],
          59: [283200, 3000],
          60: [288000, 3000],
          61: [292800, 3000],
          62: [297600, 3000],
          63: [302400, 3000],
          64: [307200, 3000],
          65: [312000, 3000],
          66: [316800, 3000],
          67: [321600, 3000],
          68: [326400, 3000],
          69: [331200, 3000],
          70: [336000, 3000],
          71: [340800, 3000],
          72: [345600, 3000],
          73: [350400, 3000],
          74: [355200, 3000],
          75: [360000, 3000],
          76: [364800, 3000],
          77: [369600, 3000],
          78: [374400, 3000],
          79: [379200, 3000],
          80: [384000, 3000],
          81: [388800, 3000],
          82: [393600, 3000],
          83: [398400, 3000],
          84: [403200, 3000],
          85: [408000, 3000],
          86: [412800, 3000],
          87: [417600, 3000]

      }
  });

[ameytessact]

I'm getting the same error.

[IWRoss]

I'm also experiencing this error, though only when I use sprites.

[thyancey]

This was driving me bananas, I tried a few things, and this ended up solving it - I wrapped the state-controlled volume variable in a ref. I'm not exactly sure why that helped - but now it doesn't throw the exception when changing the volume variable. I still have issues with HotModuleReplacement in Vite when using a sound sprite, every other save throws the exception.

const [volume, setVolume] = useState(.5);
const volumeRef = useRef(volume);

const [playSound] = useSound(mySoundFile, {
  volume: volumeRef.current,
  sprite: {
    thank: [105, 50],
    goodness: [287, 84],
    this: [650, 70],
    worked: [900, 40],
  },
});

[Clueed]

This was driving me bananas, I tried a few things, and this ended up solving it - I wrapped the state-controlled volume variable in a ref. I'm not exactly sure why that helped - but now it doesn't throw the exception when changing the volume variable.

const [volume, setVolume] = useState(.5);
const volumeRef = useRef(volume);

const [playSound] = useSound(mySoundFile, {
  volume: volumeRef.current,
  sprite: {
    thank: [105, 50],
    goodness: [287, 84],
    this: [650, 70],
    worked: [900, 40],
  },
});

When I do this and add logic to update the ref when volume changes, it errors-out again.