Mobx: Cannot read property 'atom' of undefined when I call reduce on an observable array

[capaj]

I just stumbled on this error:

Uncaught TypeError: Cannot read property 'atom' of undefined
Object.defineProperty.value @ mobx.js:1147
priceSum @ orders.js:110
dehydrate @ backend.js:1685
dehydrate @ backend.js:1685
dehydrate @ backend.js:1685
(anonymous function) @ backend.js:917
flush @ backend.js:912
(anonymous function) @ backend.js:900

Versions:
"mobx": "^2.1.5",
"mobx-react": "^3.0.5",

[AriaFallah]

I'm guessing the error is located in this block of code when it tries to report itself as observed.

[
    "concat",
    "every",
    "filter",
    "forEach",
    "indexOf",
    "join",
    "lastIndexOf",
    "map",
    "reduce",
    "reduceRight",
    "slice",
    "some"
].forEach(funcName => {
    const baseFunc = Array.prototype[funcName];
    Object.defineProperty(ObservableArray.prototype, funcName, {
        configurable: false,
        writable: true,
        enumerable: false,
        value: function() {
            this.$mobx.atom.reportObserved();
            return baseFunc.apply(this.$mobx.values, arguments);
        }
    });
});

and that for some reason your array doesn't have this.$mobx defined. I'm not sure if that's the case, but it would mean for some reason this line in the constructor is not executing.

Object.defineProperty(this, "$mobx", {
  enumerable: false,
  configurable: false,
  writable: false
});

How are you creating the observable array causing the error? Perhaps the constructor is not being invoked for a strange reason.

[capaj]

I have a json object which has an array on one attribute. In the render I run that reduce. It is indeed that 5th line from the bottom which throws.

[AriaFallah]

@capaj can you paste the code you use to create the relevant part of that JSON object? Without seeing it the only thing I can guess is that somehow your constructor is being called with the wrong this.

[mweststrate]

@capaj did you have a debugger open when running into this? I saw this once before, when using some debugging tools and the this was not bound correctly inside the getter / setter function (!) when inspecting values through the development tools.

[mweststrate]

If you have a small reproduction btw i gladly dive into it

[capaj]

@mweststrate I will try to isolate a small case this weekend. Please keep open until then

[capaj]

I tried to reproduce it, but I cannnot anymore. It might be that I was doing something weird like lodash _.clone(observable) and the merging it with other observable using _.merge().
In any case, closing this bug.

[jeffgran]

I have seen bug reports of this happening in production, but have not been able to reproduce it either.

Maybe the OS/browser has to do with it? This is the user agent info from my bug report:

browserName: Android
browserVersion: 2.3.5
osName: Android 2.3
userAgent: Mozilla/5.0 (Linux; U; Android 2.3.5; en-us; SCH-I500 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

[mweststrate]

I think it is browser related indeed, when googling for Object.defineProperty and Android 2.3 there are quite some hits, among this one: https://mail.mozilla.org/pipermail/es-discuss/2014-March/036778.html

So there seem to be some workarounds, but not sure how feasible (or needed) that is.

[marbemac]

For anybody that runs into this - for us it was redux dev tools. They work for the most part, until they didn't :). Not sure what combination of mobx usage led to the issue, but disabling redux fixed it.

[natenorberg]

Leaving this in case someone runs into the same issue I did.

I hit this error after calling lodash's cloneDeep on an observable object. Replacing it with toJS from mobx fixed it for me

[FredyC]

Please, refrain from commenting on old and closed issues as only a few people will see that. Open new issue with all necessary details.