Failed to update the empty array in mobx store under strict mode

[bogere]

Intended outcome:

I want to update multiple observable arrays under the strict mode which is happening perfectly in reactjs web app but failed in electronjs project

Actual outcome:

I am getting the error below when I try to update the observable arrays in mobx store even if I wrap the mutations under the action. (runInAction() method).
This is only happening in the electronjs reactjs project but does not show up in the reactjs project.

not allowed. Please wrap the code in an `action` if this change is intended. 
Tried to modify: BusinessStore@9.expenseChartData
▶ 33 stack frames were collapsed.
BusinessStore.handleExpenseMetrics
/stores/businessStore.js:188
  185 |         this.dashboardMetrics.totalExpenses = metricObj.totalExpenses
  186 |      })
  187 |       
> 188 |      runInAction(()=>{
      | ^  189 |         this.expenseChartLabels = metricObj.expenseChartLabels
  190 |      }) //this is just short fix for updates for many arrays in objects
  191 | `

How to reproduce the issue:

It is working perfectly in the reactjs project as shown by codeSandbox
But the issue shows up in my reactjs in the electronjs shell..

@action handleDashboardMetrics(metricsObj){

      runInAction(()=>{
         let dashMetrics = this.dashboardMetrics;
         dashMetrics.totalRevenue = metricsObj.totalRevenue
         dashMetrics.totalCostSales = metricsObj.totalCostSales
         dashMetrics.metricPeriod  = metricsObj.metricPeriod  
      })
   }

Versions

"mobx": "5.15.6",
"mobx-react": "6.3.0",

Please you can follow the discussion on stackoverflow via this link

[danielkcz]

Does electron support Proxies? I am not sure really, but if not, you would need MobX V4. Or if you are feeling adventurous, the upcoming V6 is universal, but might be unstable. You can install mobx@next and you can find docs here

https://deploy-preview-2327--mobx-docs.netlify.app

[mweststrate]

There might be multiple versions of mobx installed in the project

…

On Fri, 4 Sep 2020, 06:50 Daniel K., ***@***.***> wrote: Does electron support Proxies? I am not sure really, but if not, you would need MobX V4. Or if you are feeling adventurous, the upcoming V6 is universal, but might be unstable. You can install ***@***.*** and you can find docs here https://deploy-preview-2327--mobx-docs.netlify.app — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2445 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBHOKIZPCK3HW43DR4LSEB5YVANCNFSM4QWFXS7Q> .

[bogere]

There might be multiple versions of mobx installed in the project
…
On Fri, 4 Sep 2020, 06:50 Daniel K., @.> wrote: Does electron support Proxies? I am not sure really, but if not, you would need MobX V4. Or if you are feeling adventurous, the upcoming V6 is universal, but might be unstable. You can install @. and you can find docs here https://deploy-preview-2327--mobx-docs.netlify.app — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2445 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAN4NBHOKIZPCK3HW43DR4LSEB5YVANCNFSM4QWFXS7Q .

I happen to have mobx and mobx-react installed but after we tried calling the mobx actions in the same file, it worked with hardcoded values without showing the above error.
This sample worked perfectly fine when I call the actions from the business store, but the problem comes when calling it from the react component

//export default new BusinessStore()
const biz_store = new BusinessStore()
export default biz_store

//test it and we see how it runs.
autorun(() => {
   console.log(
     biz_store.dashboardMetrics.totalExpenses,
     biz_store.expenseChartLabels,
     biz_store.expenseChartData
   );
 });

 biz_store.handleExpenseMetrics({
   totalExpenses: Math.random(),
   expenseChartLabels: [1, 2, 3],
   expenseChartData: [111, 222, 333]
 });
 
 setTimeout(() => {
   biz_store.handleExpenseMetrics({
     totalExpenses: Math.random(),
     expenseChartLabels: [11, 22, 33],
     expenseChartData: [1, 2, 3]
   });
 }, 2000);

[bogere]

Does electron support Proxies? I am not sure really, but if not, you would need MobX V4. Or if you are feeling adventurous, the upcoming V6 is universal, but might be unstable. You can install mobx@next and you can find docs here

https://deploy-preview-2327--mobx-docs.netlify.app

I cannot go back to mobx v4. let me wait for mobx v6 to stabilise.. since some most of values are working well except the observable arrays. let me use the local state for the part of the array.

[bogere]

Actually the code i wrote above brings about the error in the setTimeout function

setTimeout(() => {
   biz_store.handleExpenseMetrics({
     totalExpenses: Math.random(),
     expenseChartLabels: [11, 22, 33],
     expenseChartData: [1, 2, 3]
   });
 }, 2000);

[mweststrate]

See the documentation about writing async actions, if you update from another tick / asynchronously, that block should be action wrapped as well. So you need setTimeout(action(() =>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.