[Resolved] Dev editor is stuck when try to bind var

Developer corner
1

Im working on custom component canvas where I have to insert array of images.

Today dev editor mode (with localhost component) doesnt work properly (it was ok yesterday!): I try to click “bind” and whole editor stuck, I need to hard reload and paste component again…

!!! However this canvas component perfectly works in normal weweb editor as component from github, I can link array and no errors in console. Problem is only in DEV editor

console sometimes shows error sometimes not:

Screenshot 2023-02-28 at 17.50.42
Screenshot 2023-02-28 at 17.50.42758×316 101 KB

it looks like error is because my array is empty but its empty because I cannot link any variable. maybe not

when I click “+Add” button to add options I catch this error in console, if it makes sense

Screenshot 2023-02-28 at 17.55.37
Screenshot 2023-02-28 at 17.55.37762×394 108 KB

Here is video of binding problem:

2

Hi @Anna.fae,
dev mode is often less tolerant about errors.
Here your error is happening in both mode, but it is silent in the normal editor. This is current practise in dev world, so you are forced to pay attention to this error when developping.

In your usecase, your code logic is expecting your property to be an array, but first time it is empty.
Two solutions:

  • Add a default value in the ww-config to an empty array, so that the initial value is correct. For that just add defaultValue: [] on the configuration of your property

  • Add a computed which check the type of data of your property and return an empty array if needed. When making a property bindable it’s often a good practise to be “defensive” with the data, as the user can bind whatever they want.

If it is the same component as previous topic, your computed will be something like this with

computed: {
       images() { return Array.isArray(this.content.inputArray) ? this.content.inputArray : [] } 
   },

For the second error, using the default value in the config should fix the problem

1 Like