Last frame is always undefined

All the other frames work exept last frame Here is my config

import * as SpriteSpin from "spritespin";
$(function(){
  var spin= $(".model"),id = spin.attr("data");
  if(id){
    var f = $(".model").attr("frames"),r = $(".model").attr("reverse");
    spin.spritespin({
      source: SpriteSpin.sourceArray("/img/product/" + id + "/img{frame}.jpg", {frame: [1, f],digits: 2}),
      onLoad: function(){
        setTimeout(function(){window.addEventListener("deviceorientation", handleOrientation);},1000);
        spin.on("touchend",function(){window.addEventListener("deviceorientation", handleOrientation);});
        spin.on("touchstart",function(){window.removeEventListener("deviceorientation", handleOrientation);});
      },
      width: 800,
      height: 470,
      loop: false,
      wrap: false,
      stopFrame: f-1,
      sense: r,
      preloadCount: parseInt(f/2),
      onFrame: function(e,data){
        if(data.frame==f-1){
          console.log(data);
        }
      },
      plugins: [
        "360",
        "ease",
        "drag"
      ]
    });
  }
  }

the frames are 31 the spritespin data i get for the images is this

0: <img src="/img/product/corridrain/img01.jpg">
1: <img src="/img/product/corridrain/img02.jpg">
2: <img src="/img/product/corridrain/img03.jpg">
3: <img src="/img/product/corridrain/img04.jpg">
4: <img src="/img/product/corridrain/img05.jpg">
5: <img src="/img/product/corridrain/img06.jpg">
6: <img src="/img/product/corridrain/img07.jpg">
7: <img src="/img/product/corridrain/img08.jpg">
8: <img src="/img/product/corridrain/img09.jpg">
9: <img src="/img/product/corridrain/img10.jpg">
10: <img src="/img/product/corridrain/img11.jpg">
11: <img src="/img/product/corridrain/img12.jpg">
12: <img src="/img/product/corridrain/img13.jpg">
13: <img src="/img/product/corridrain/img14.jpg">
14: <img src="/img/product/corridrain/img15.jpg">
15: <img src="/img/product/corridrain/img16.jpg">
16: <img src="/img/product/corridrain/img17.jpg">
17: <img src="/img/product/corridrain/img18.jpg">
18: <img src="/img/product/corridrain/img19.jpg">
19: <img src="/img/product/corridrain/img20.jpg">
20: <img src="/img/product/corridrain/img21.jpg">
21: <img src="/img/product/corridrain/img22.jpg">
22: <img src="/img/product/corridrain/img23.jpg">
23: <img src="/img/product/corridrain/img24.jpg">
24: <img src="/img/product/corridrain/img25.jpg">
25: <img src="/img/product/corridrain/img26.jpg">
26: <img src="/img/product/corridrain/img27.jpg">
27: <img src="/img/product/corridrain/img28.jpg">
28: <img src="/img/product/corridrain/img29.jpg">
29: <img src="/img/product/corridrain/img30.jpg">
30: <img src="/img/product/corridrain/img31.jpg">
31: <img src="undefined">
length: 32

I was getting this error on Firefox

NS_ERROR_NOT_AVAILABLE: render-360.js:29
    onDraw webpack:///./node_modules/spritespin/release/src/plugins/render-360.js?:29
    bind webpack:///./node_modules/spritespin/release/src/utils/utils.js?:66
    jQuery 7
    updateAfter webpack:///./node_modules/spritespin/release/src/core/playback.js?:61
    updateFrame webpack:///./node_modules/spritespin/release/src/core/playback.js?:79
    drag webpack:///./node_modules/spritespin/release/src/plugins/input-drag.js?:62
    bind webpack:///./node_modules/spritespin/release/src/utils/utils.js?:66
    jQuery 2

And this on chrome

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
    at jQuery.fn.init.onDraw (webpack:///./node_modules/spritespin/release/src/plugins/render-360.js?:29:26)
    at HTMLDivElement.eval (webpack:///./node_modules/spritespin/release/src/utils/utils.js?:66:18)
    at HTMLDivElement.dispatch (webpack:///./node_modules/jquery/dist/jquery.js?:5233:27)
    at HTMLDivElement.elemData.handle (webpack:///./node_modules/jquery/dist/jquery.js?:5040:28)
    at Object.trigger (webpack:///./node_modules/jquery/dist/jquery.js?:8461:12)
    at HTMLDivElement.eval (webpack:///./node_modules/jquery/dist/jquery.js?:8539:17)
    at Function.each (webpack:///./node_modules/jquery/dist/jquery.js?:367:19)
    at jQuery.fn.init.each (webpack:///./node_modules/jquery/dist/jquery.js?:202:17)
    at jQuery.fn.init.trigger (webpack:///./node_modules/jquery/dist/jquery.js?:8538:15)
    at updateAfter (webpack:///./node_modules/spritespin/release/src/core/playback.js?:61:17)

Edit I forgot to mention that i am using the latest version 4.0.6 and jquery version 3.4.0

giniedp / spritespin

Last frame is always undefined #65