Functionality that works in editor doesn't work when published 😬

[Anna.fae]

I have a page where I work with collections, the work is pretty heavy:

Some if-logic, merging, filtering & grouping collections in custom js formula. Result perfectly works in Editor and shows no errors in console except this warning:

When I publish my site everything else is working except this page. I see that collection is loaded (number of items displayed) but items not displayed after processed by my custom formula. And there is Error in console (not sure if its just a coincidence or not):

I’m new to JS, maybe I did some mistake and I cannot recognize it.

Maybe problem is that I set my variables to collection variables in formula
Like can I do this? let x = collection variable etc…

I have no idea what can cause this problem

let collectionClientWishlistMy = collections['5aa426a7-4fdc-44c9-a6f6-331875a23883']['data'].map(obj => ({ ...obj, diff: 'wishlist' }));
let collectionClientClothesMy=collections['6a7b27ac-a8bc-4824-919b-897b28040d58']['data'].map(obj => ({ ...obj, diff: 'clothes' }));
let collectionClientWishlistFromStylist=[];

let collectionStylistClothesFromClient=collections['bac5cee2-073d-41ac-8bed-217ae7194be2']['data'].map(obj => ({ ...obj, diff: 'clothes' }));
let collectionStylistWishlistFromClient=[];
let collectionStylistWishlistForClient=[];

/*----------------FILTER BY ROLE---------------------*/

let mergedCollection = [];

if ( variables[/* SELECTED ROLE */'ba37e4b9-a351-4015-9062-d14cd5d100d5'] =="user" )
{
    mergedCollection = [...collectionClientWishlistMy, ...collectionClientClothesMy, ...collectionClientWishlistFromStylist];    
}
else if (variables[/* SELECTED ROLE */'ba37e4b9-a351-4015-9062-d14cd5d100d5'] =="stylist" )
{
      mergedCollection = [...collectionStylistClothesFromClient, ...collectionStylistWishlistFromClient, ...collectionStylistWishlistForClient];  
}

/*----------------FILTER BY PAGE---------------------*/

let clothesByPage =[];

if ( variables['59113970-c7fb-4902-9709-48de0151c194'] == "capsule"){
  clothesByPage = mergedCollection.filter((x) => x.capsule == true);
}
else if ( variables['59113970-c7fb-4902-9709-48de0151c194'] == "clothes"){
  clothesByPage = mergedCollection.filter((x) => x.diff === "clothes");
}
else if ( variables['59113970-c7fb-4902-9709-48de0151c194'] === "wishlist"){
  clothesByPage = mergedCollection.filter((x) => x.diff === "wishlist");
}

/*----------------GROUPING---------------------*/

let groupingKey = variables['fbe73684-da7d-4190-a5ba-6cd4fea85e28'];

if ( groupingKey != "season") {

function groupBy(arr, key) {

  const groups = {};
  
  arr.forEach(item => {
    const groupKey = item[key] || "";
    if (!groups[groupKey]) {
      groups[groupKey] = { name: groupKey, items: [] };
    }
    groups[groupKey].items.push(item);
  });
  
  return Object.values(groups);
}

return groupBy(clothesByPage, groupingKey);
}

/*----------------SEASON---------------------*/

else if ( groupingKey == "season") {

function groupBy(clothesByPage, groupingKey) {
  const result = {};
  
  clothesByPage.forEach((item) => {
    const keys = item[groupingKey];
    
    if (keys && keys.length > 0) {
      keys.forEach((key) => {
        if (!result[key]) {
          result[key] = { name: key, items: [] };
        }
        
        result[key].items.push(item);
      });
    } else {
      if (!result.empty) {
        result.empty = { name: 'Без сезону', items: [] };
      }
      
      result.empty.items.push(item);
    }
  });
  
  return Object.values(result);
}

return groupBy(clothesByPage, groupingKey);

}

[dorilama]

The error you have is not related to anything on weweb side.
Wathever custom code you put in the page is using react, and specifically is using react hooks in a wrong way.

[Anna.fae]

Nope I dont use any React hooks, that’s pure js code logic as I understand.

I would like to know why this code works in editor but on production it doesnt, I would like to understand logic of such behaviour and what to avoid…

[dorilama]

The error comes from react.
If you are sure that you have nothing to do with it then you may want to check this with weweb team.

[aurelie]

The error seems to come from a blur.js library. Are you using any external library?

[aurelie]

Concerning your formula, it seems ok as you are not updating the original arrays. If your collection are not paginated this will work. If there are paginated, you may have problems with some items beeing null due to how we handle pagination.
Your problem is not coming from these line of javascript, but by something else

[Anna.fae]

I try to add logic and changes step by step.
so first this didn’t work and when I updated the code and changed, this part worked…

THIS 

array.map(obj => ({ ...obj, param,: 'value' }))

TO THIS

array.map(obj => Object.assign({}, obj, { diff: 'wishlist' }));

Then merging collections like this didnt work as well…

THIS DOESNT WORK:

 mergedCollection = [...arr1, ...arr2, ...arr3]

THIS DOESNT WORK:

 mergedCollection = arr1.concat( arr2, arr3);

THIS DOESNT WORK:

mergedCollection.push(...arr1);
mergedCollection.push(...arr2);
mergedCollection.push(...arr3);

again, everything that I try works in EDITOR but when I publish - doesn’t.

now try to play with different way to merge collections…

I try to understand why some methods don’t work on production but work in editor, whats the logic behind that?? I learn now to do things in Weweb, would be nice to understand this basics…

[aurelie]

For your first example

Synthax is incorrect you have an extra commo param, :
The synthax you propose for solution is working, but you can also go with
array.map(obj => ({...obj, diff: 'wishlist' })
If you want to learn more about it, it’s basic javascript, under the keyword ‘spread operator’

For your second example
First and second solution should work the same. Third one is a little different as it update the original array (what the other solution are not doing).
It is also basic javascript, if you want to learn more you can search course about array manipulation.

Please note that collections in weweb are not array; but object containing a key data with an array.

For difference between editor and published, in your usecase it should not change something. May be due to some initial value throwing error when some of your object is null. Try to look at web console to see if any error is appearing here