Error reading 'metrics' and 'state'

[krzysztofwolny]

Hi, I am using spritespin on online shop based on Magento 2. I installed it via npm in separate module. Sometimes after page reload, when I resize the window I am starting to get lots of errors of two kinds:

Uncaught TypeError: Cannot read properties of undefined (reading 'state')
at getState (state.ts:10:21)
at getPluginState (state.ts:27:17)
at getState$$1 (input-drag.ts:18:10)
at jQuery.fn.init.onInit (input-drag.ts:32:17)
at HTMLDivElement. (utils.ts:50:12)
at HTMLDivElement.dispatch (jquery.js:5232:27)
at HTMLDivElement.elemData.handle (jquery.js:4884:29)
at Object.trigger (jquery.js:5136:13)
at Object.jQuery.event.trigger (jquery-migrate.js:633:22)
at HTMLDivElement. (jquery.js:5866:18)

and

render-360.ts:18 Uncaught TypeError: Cannot read properties of undefined (reading 'metrics')
at jQuery.fn.init.onDraw (render-360.ts:18:38)
at HTMLDivElement. (utils.ts:50:12)
at HTMLDivElement.dispatch (jquery.js:5232:27)
at HTMLDivElement.elemData.handle (jquery.js:4884:29)
at Object.trigger (jquery.js:5136:13)
at Object.jQuery.event.trigger (jquery-migrate.js:633:22)
at HTMLDivElement. (jquery.js:5866:18)
at Function.each (jquery.js:376:20)
at jQuery.fn.init.each (jquery.js:142:18)
at jQuery.fn.init.trigger (jquery.js:5865:16)

Errors occur on window resize, this one with 'metrics' property is repeating thousands of times.
Even when the errors occurs, image is still spinning correctly, but I need to get rid of those errors in console :)

[giniedp]

i can not reproduce it, at least not in the current responsive example
https://spritespin.ginie.eu/samples/#/basics-responsive

It seems like there is logic active on spritespin element, that no longer have the spritespin state. Do you happen to create and remove the spritespin instances? If you remove them, how do you do that?

[krzysztofwolny]

As I see, we use spritespin on fotorama gallery. There are some js calculations with image sizes when page is resized. After page reloads there is short period of time, when whole spritespin 'data' object is undefined and this is the moment, when the errors are thrown. I am not sure if this recalculations on fotorama can remove instance of spritespin.

[giniedp]

i suspect that during resize the spritespin instances are recreated somwhere in your code. You must ensure to destroy the spritespin instances when the elements are removed/recreated. Do you have an example or the page where i can see it in action?

[krzysztofwolny]

Unfortunately I can't show You any project instance right now. As i found, there are no errors, when I delete responsive: true option

[giniedp]

but you still might have a memory leak. In the console take a look how many instances you have before and after resize

SpriteSpin.instances