PDA

View Full Version : Ext-React does not work with Mobx, Mobx-React



eucaos
12 Jul 2018, 12:35 AM
When using an Ext-React Container component wrapped with the Mobx-React observer function i get :

"Uncaught RangeError: Maximum call stack size exceeded".
I tracked back the issue to a ExtJS cloneProps method (webpack:///../~/@extjs/reactor/dist/ExtJSComponent.js) which is using loadash cloneDeepWith function.

From ExtJS comments :
/**
* Cloning props rather than passing them directly on as configs fixes issues where Ext JS mutates configs during
* component initialization. One example of this is grid columns get $initParent added when the grid initializes.
* @param (https://github.com/param) {Object} props
* @Private (https://github.com/Private)
*/

Uncaught RangeError: Maximum call stack size exceeded
at cloneSet (index.js:1056)
at initCloneByTag (index.js:1300)
at baseClone (index.js:877)
at index.js:897
at arrayEach (index.js:140)
at baseClone (index.js:891)
at index.js:897
at arrayEach (index.js:140)
at baseClone (index.js:891)
at index.js:897

https://user-images.githubusercontent.com/6533163/42558689-b815e51a-84fa-11e8-858c-b678f23e1683.png


I'm using the latest mobx-react and ext-react libraries.
Usage ex:





import * as React from "react";
import { Container } from "@extjs/ext-react";
import { observer } from "mobx-react";

console.log(observer);

export const TodoComponent= observer(() => (
<div>
<Container>
<div />
</Container>
</div>
));
launch(<TodoComponent/>);


Observation:
If I remove the container component it works fine.
this works:



export const TodoComponent= observer(() => (
<div>
<div />
</div>)