Receiving "TypeError: can't define property "level": Object is not extensible" when registering a gradient and using redux?

[Staijn1]

Hi,

This discussion is for anyone running into the following error when registering a gradient and using redux: TypeError: can't define property "level": Object is not extensible

I am using Audiomotion in an application that uses the Redux pattern to store its state. So gradients are stored in this as well.
When implementing this I received an error which I suspect will be common when you use the Redux pattern.

This error occurred when registering a gradient, that in it's colorStops did not have a level attribute set.
Audiomotion does some checks on this colorstops array and will write some defaults.

The gradients received from the redux store will have had the Object.preventExtensions() method called on it internally, which means writing the default value for level will return the error: TypeError: can't define property "level": Object is not extensible.

To prevent this error, create a deep copy of the gradient that you want to register, before calling the registerGradient method.

Example:

const someGradientFromRedux = {
    bgColor: '#000',
    dir: 'h',       
    colorStops: [      
        { color: 'yellow', pos: .2 },
        { color: '#0f0', pos: .7 }  // No colorstop has level defined
    ]
}

// Before passing the gradient to Audiomotion we copy it using structuredClone, traditional spread operator approach not tested
audiomotion.registerGradient("someGradientName", structuredClone(someGradientFromRedux));

[hvianna]

Thanks for this! I'll have a look into making a copy of the object provided by the user, so this error can be prevented.