Minified React error #[object Object]

[PhilNorfleet]

Building locally produces no errors, whereas our production build serves the following:

app-public.js:formatted:23111 Error: Minified React error #[object Object]; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=[object Object] for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at n (app-public.js:formatted:21146)
at a (app-public.js:formatted:23584)
at s (app-public.js:formatted:23649)
at commitDeletion (app-public.js:formatted:23754)
at t (app-public.js:formatted:22850)
at E (app-public.js:formatted:23249)
at b (app-public.js:formatted:23228)
at h (app-public.js:formatted:23158)
at m (app-public.js:formatted:23135)
at Object.updateContainer (app-public.js:formatted:24015)
at app-public.js:formatted:24572
at Object.unbatchedUpdates (app-public.js:formatted:23901)
at Qt (app-public.js:formatted:24571)
at Object.render (app-public.js:formatted:26071)
at Object.<anonymous> (app-public.js:formatted:56736)
at Object.<anonymous> (app-public.js:formatted:56741)

I am unsure how to debug this, as there does not seem to be precedent for receiving an error code that is an object. Any ideas on how to proceed?

[gaearon]

Looks odd. Can you figure out a minimal reproducing case?

[IvanJoukov]

Having the same issue. Hard to debug or figure out what the error is because it only happens on the production build. In development build it works fine. Also the link it says to go to http://facebook.github.io/react/docs/error-decoder.html?invariant=[object Object] is just the generic error decoder link and doesn't offer any useful info.

[gaearon]

The fact that the link itself looks so weird is the bug. It doesn't offer more info because something in React itself is broken if you see this.

If you can point me to a way to reproduce (even with a production website) that would be very helpful.

[gaearon]

One possible reason this could happen is if you're using a broken version of Uglify that breaks the React bundle. Here is an example of such issue: #12555 (comment). Try downgrading (or upgrading) Uglify.

I'm going to close because we didn't get more details so far. If you can reproduce this I can take another look.

[savybrandt-zz]

I'm having the same issue @gaearon .

I am using react-rails

The expected behavior in my application is to render a wheel graph and graph key component. Clicking on a section of the graph "focuses" that section and updates the forst key in the key component.

What happens instead is after clicking on the section I receive the error "Error: Minified React error #[object Object]" and my key component ends up with 3 elements instead of 2. I console logged my keys all the way through the onClick listener to rendering the key component again and the "keys" prop only ever show an array of 2 items. It's like the component is adding the new props instead of replacing them.

This issue only occurs for me in production and not on my local. I tried tracking the error down best I could in the minified src and this is what I got.

[gaearon]

@savybrandt

Thanks for extra info, this helps. Can I ask you to take a screenshot like this for every call stack frame? I'm sorry if this is annoying.

i.e. click on Call Stack in the debugger and screenshot where that argument (e) is being passed from. That would be very helpful.

[gaearon]

Also we'd need to know which version of React you're using

[savybrandt-zz]

Here's the full Call Stack. I'm using react-rails version (2.4.4)

[gaearon]

What version of React itself does you version of react-rails come with?
You can tell by doing console.log(React.version)

[gaearon]

The second frame is the most interesting:

The i(e) call seems to assume i() is a different function than it really is.

When I look at actual React code published on npm (for example, React 16.3.1 production CommonJS bundle), this piece of code looks like:

function df(a, b, c, d, e) {
  function f(a) { // <-------------- definition of f()
    var c = a.ref;
    if (null !== c)
      if ("function" === typeof c)
        try {
          c(null);
        } catch (t) {
          b(a, t);
        }
      else c.current = null;
  }
  function h(a) {
    "function" === typeof Je && Je(a);
    switch (a.tag) {
      case 2:
        f(a);
        var c = a.stateNode;
        if ("function" === typeof c.componentWillUnmount)
          try {
            (c.props = a.memoizedProps),
              (c.state = a.memoizedState),
              c.componentWillUnmount();
          } catch (t) {
            b(a, t);
          }
        break;
      case 5:
        f(a); // <-------------------- call that crashes for you
        break;
      case 7:
        g(a.stateNode);
        break;
      case 4:
        p && v(a);
    }
  }

So in the original code, we're calling a function defined right above. But in your bundle, we're calling a completely different function (that prints an invariant).

I'd appreciate if you could paste a larger chunk of your bundle around the second call frame I mentioned above. Maybe it could help illuminate what happened to the actual function we wanted to call.

Overall, my guess is this is a bug in Uglify (or whatever React Rails is using for minification). But we'll need a reproducing project to confirm it. At the very least we need to know which versions of Webpack and Uglify you're using.

[savybrandt-zz]

Here are a couple blocks above and the rest of the block that contains the function call in frame 2.

    function Dn(e, t, n, r, o) {
        function a(e, t, n) {
            var i = t.expirationTime;
            t.child = null === e ? Ao(t, null, n, i) : $o(t, e.child, n, i)
        }
        function s(e, t) {
            var n = t.ref;
            null === n || e && e.ref === n || (t.effectTag |= 128)
        }
        function l(e, t, n, i) {
            if (s(e, t),
            !n)
                return i && on(t, !1),
                d(e, t);
            n = t.stateNode,
            zr.current = t;
            var r = n.render();
            return t.effectTag |= 1,
            a(e, t, r),
            t.memoizedState = n.state,
            t.memoizedProps = n.props,
            i && on(t, !0),
            t.child
        }
        function c(e) {
            var t = e.stateNode;
            t.pendingContext ? tn(e, t.pendingContext, t.pendingContext !== t.context) : t.context && tn(e, t.context, !1),
            g(e, t.containerInfo)
        }
        function d(e, t) {
            if (null !== e && t.child !== e.child ? i("153") : void 0,
            null !== t.child) {
                e = t.child;
                var n = sn(e, e.pendingProps, e.expirationTime);
                for (t.child = n,
                n.return = t; null !== e.sibling; )
                    e = e.sibling,
                    n = n.sibling = sn(e, e.pendingProps, e.expirationTime),
                    n.return = t;
                n.sibling = null
            }
            return t.child
        }
        function u(e, t) {
            switch (t.tag) {
            case 3:
                c(t);
                break;
            case 2:
                rn(t);
                break;
            case 4:
                g(t, t.stateNode.containerInfo)
            }
            return null
        }
        var h = e.shouldSetTextContent
          , p = e.useSyncScheduling
          , f = e.shouldDeprioritizeSubtree
          , m = t.pushHostContext
          , g = t.pushHostContainer
          , v = n.enterHydrationState
          , y = n.resetHydrationState
          , b = n.tryToClaimNextHydratableInstance;
        e = Cn(r, o, function(e, t) {
            e.memoizedProps = t
        }, function(e, t) {
            e.memoizedState = t
        });
        var _ = e.adoptClassInstance
          , w = e.constructClassInstance
          , x = e.mountClassInstance
          , k = e.updateClassInstance;
        return {
            beginWork: function(e, t, n) {
                if (0 === t.expirationTime || t.expirationTime > n)
                    return u(e, t);
                switch (t.tag) {
                case 0:
                    null !== e ? i("155") : void 0;
                    var r = t.type
                      , o = t.pendingProps
                      , C = Kt(t);
                    return C = Zt(t, C),
                    r = r(o, C),
                    t.effectTag |= 1,
                    "object" == typeof r && null !== r && "function" == typeof r.render ? (t.tag = 2,
                    o = rn(t),
                    _(t, r),
                    x(t, n),
                    t = l(e, t, !0, o)) : (t.tag = 1,
                    a(e, t, r),
                    t.memoizedProps = o,
                    t = t.child),
                    t;
                case 1:
                    e: {
                        if (o = t.type,
                        n = t.pendingProps,
                        r = t.memoizedProps,
                        mo.current)
                            null === n && (n = r);
                        else if (null === n || r === n) {
                            t = d(e, t);
                            break e
                        }
                        r = Kt(t),
                        r = Zt(t, r),
                        o = o(n, r),
                        t.effectTag |= 1,
                        a(e, t, o),
                        t.memoizedProps = n,
                        t = t.child
                    }
                    return t;
                case 2:
                    return o = rn(t),
                    r = void 0,
                    null === e ? t.stateNode ? i("153") : (w(t, t.pendingProps),
                    x(t, n),
                    r = !0) : r = k(e, t, n),
                    l(e, t, r, o);
                case 3:
                    return c(t),
                    o = t.updateQueue,
                    null !== o ? (r = t.memoizedState,
                    o = xn(e, t, o, null, null, n),
                    r === o ? (y(),
                    t = d(e, t)) : (r = o.element,
                    C = t.stateNode,
                    (null === e || null === e.child) && C.hydrate && v(t) ? (t.effectTag |= 2,
                    t.child = Ao(t, null, r, n)) : (y(),
                    a(e, t, r)),
                    t.memoizedState = o,
                    t = t.child)) : (y(),
                    t = d(e, t)),
                    t;
                case 5:
                    m(t),
                    null === e && b(t),
                    o = t.type;
                    var S = t.memoizedProps;
                    return r = t.pendingProps,
                    null === r && (r = S,
                    null === r ? i("154") : void 0),
                    C = null !== e ? e.memoizedProps : null,
                    mo.current || null !== r && S !== r ? (S = r.children,
                    h(o, r) ? S = null : C && h(o, C) && (t.effectTag |= 16),
                    s(e, t),
                    2147483647 !== n && !p && f(o, r) ? (t.expirationTime = 2147483647,
                    t = null) : (a(e, t, S),
                    t.memoizedProps = r,
                    t = t.child)) : t = d(e, t),
                    t;
                case 6:
                    return null === e && b(t),
                    e = t.pendingProps,
                    null === e && (e = t.memoizedProps),
                    t.memoizedProps = e,
                    null;
                case 8:
                    t.tag = 7;
                case 7:
                    return o = t.pendingProps,
                    mo.current ? null === o && (o = e && e.memoizedProps,
                    null === o ? i("154") : void 0) : null !== o && t.memoizedProps !== o || (o = t.memoizedProps),
                    r = o.children,
                    t.stateNode = null === e ? Ao(t, t.stateNode, r, n) : $o(t, t.stateNode, r, n),
                    t.memoizedProps = o,
                    t.stateNode;
                case 9:
                    return null;
                case 4:
                    e: {
                        if (g(t, t.stateNode.containerInfo),
                        o = t.pendingProps,
                        mo.current)
                            null === o && (o = e && e.memoizedProps,
                            null == o ? i("154") : void 0);
                        else if (null === o || t.memoizedProps === o) {
                            t = d(e, t);
                            break e
                        }
                        null === e ? t.child = $o(t, null, o, n) : a(e, t, o),
                        t.memoizedProps = o,
                        t = t.child
                    }
                    return t;
                case 10:
                    e: {
                        if (n = t.pendingProps,
                        mo.current)
                            null === n && (n = t.memoizedProps);
                        else if (null === n || t.memoizedProps === n) {
                            t = d(e, t);
                            break e
                        }
                        a(e, t, n),
                        t.memoizedProps = n,
                        t = t.child
                    }
                    return t;
                default:
                    i("156")
                }
            },
            beginFailedWork: function(e, t, n) {
                switch (t.tag) {
                case 2:
                    rn(t);
                    break;
                case 3:
                    c(t);
                    break;
                default:
                    i("157")
                }
                return t.effectTag |= 64,
                null === e ? t.child = null : t.child !== e.child && (t.child = e.child),
                0 === t.expirationTime || t.expirationTime > n ? u(e, t) : (t.firstEffect = null,
                t.lastEffect = null,
                t.child = null === e ? Ao(t, null, null, n) : $o(t, e.child, null, n),
                2 === t.tag && (e = t.stateNode,
                t.memoizedProps = e.props,
                t.memoizedState = e.state),
                t.child)
            }
        }
    }
    function En(e, t, n) {
        function r(e) {
            e.effectTag |= 4
        }
        var o = e.createInstance
          , a = e.createTextInstance
          , s = e.appendInitialChild
          , l = e.finalizeInitialChildren
          , c = e.prepareUpdate
          , d = e.persistence
          , u = t.getRootHostContainer
          , h = t.popHostContext
          , p = t.getHostContext
          , f = t.popHostContainer
          , m = n.prepareToHydrateHostInstance
          , g = n.prepareToHydrateHostTextInstance
          , v = n.popHydrationState
          , y = void 0
          , b = void 0
          , _ = void 0;
        return e.mutation ? (y = function() {}
        ,
        b = function(e, t, n) {
            (t.updateQueue = n) && r(t)
        }
        ,
        _ = function(e, t, n, i) {
            n !== i && r(t)
        }
        ) : i(d ? "235" : "236"),
        {
            completeWork: function(e, t, n) {
                var d = t.pendingProps;
                switch (null === d ? d = t.memoizedProps : 2147483647 === t.expirationTime && 2147483647 !== n || (t.pendingProps = null),
                t.tag) {
                case 1:
                    return null;
                case 2:
                    return en(t),
                    null;
                case 3:
                    return f(t),
                    Gt(mo, t),
                    Gt(fo, t),
                    d = t.stateNode,
                    d.pendingContext && (d.context = d.pendingContext,
                    d.pendingContext = null),
                    null !== e && null !== e.child || (v(t),
                    t.effectTag &= -3),
                    y(t),
                    null;
                case 5:
                    h(t),
                    n = u();
                    var w = t.type;
                    if (null !== e && null != t.stateNode) {
                        var x = e.memoizedProps
                          , k = t.stateNode
                          , C = p();
                        k = c(k, w, x, d, n, C),
                        b(e, t, k, w, x, d, n),
                        e.ref !== t.ref && (t.effectTag |= 128)
                    } else {
                        if (!d)
                            return null === t.stateNode ? i("166") : void 0,
                            null;
                        if (e = p(),
                        v(t))
                            m(t, n, e) && r(t);
                        else {
                            e = o(w, d, n, e, t);
                            e: for (x = t.child; null !== x; ) {
                                if (5 === x.tag || 6 === x.tag)
                                    s(e, x.stateNode);
                                else if (4 !== x.tag && null !== x.child) {
                                    x.child.return = x,
                                    x = x.child;
                                    continue
                                }
                                if (x === t)
                                    break;
                                for (; null === x.sibling; ) {
                                    if (null === x.return || x.return === t)
                                        break e;
                                    x = x.return
                                }
                                x.sibling.return = x.return,
                                x = x.sibling
                            }
                            l(e, w, d, n) && r(t),
                            t.stateNode = e
                        }
                        null !== t.ref && (t.effectTag |= 128)
                    }
                    return null;
                case 6:
                    if (e && null != t.stateNode)
                        _(e, t, e.memoizedProps, d);
                    else {
                        if ("string" != typeof d)
                            return null === t.stateNode ? i("166") : void 0,
                            null;
                        e = u(),
                        n = p(),
                        v(t) ? g(t) && r(t) : t.stateNode = a(d, e, n, t)
                    }
                    return null;
                case 7:
                    (d = t.memoizedProps) ? void 0 : i("165"),
                    t.tag = 8,
                    w = [];
                    e: for ((x = t.stateNode) && (x.return = t); null !== x; ) {
                        if (5 === x.tag || 6 === x.tag || 4 === x.tag)
                            i("247");
                        else if (9 === x.tag)
                            w.push(x.type);
                        else if (null !== x.child) {
                            x.child.return = x,
                            x = x.child;
                            continue
                        }
                        for (; null === x.sibling; ) {
                            if (null === x.return || x.return === t)
                                break e;
                            x = x.return
                        }
                        x.sibling.return = x.return,
                        x = x.sibling
                    }
                    return x = d.handler,
                    d = x(d.props, w),
                    t.child = $o(t, null !== e ? e.child : null, d, n),
                    t.child;
                case 8:
                    return t.tag = 7,
                    null;
                case 9:
                    return null;
                case 10:
                    return null;
                case 4:
                    return f(t),
                    y(t),
                    null;
                case 0:
                    i("167");
                default:
                    i("156")
                }
            }
        }
    }
    function Mn(e, t) {
        function n(e) {
            switch ("function" == typeof vn && vn(e),
            e.tag) {
            case 2:
                i(e);
                var n = e.stateNode;
                if ("function" == typeof n.componentWillUnmount)
                    try {
                        n.props = e.memoizedProps,
                        n.state = e.memoizedState,
                        n.componentWillUnmount()
                    } catch (i) {
                        t(e, i)
                    }
                break;
            case 5:
                i(e);
                break;
            case 7:
                r(e.stateNode);
                break;
            case 4:
                l && a(e)
            }
        }
        function r(e) {
            for (var t = e; ; )
                if (n(t),
                null === t.child || l && 4 === t.tag) {
                    if (t === e)
                        break;
                    for (; null === t.sibling; ) {
                        if (null === t.return || t.return === e)
                            return;
                        t = t.return
                    }
                    t.sibling.return = t.return,
                    t = t.sibling
                } else
                    t.child.return = t,
                    t = t.child
        }
        function o(e) {
            return 5 === e.tag || 3 === e.tag || 4 === e.tag
        }
        function a(e) {
            for (var t = e, o = !1, a = void 0, s = void 0; ; ) {
                if (!o) {
                    o = t.return;
                    e: for (; ; ) {
                        switch (null === o ? i("160") : void 0,
                        o.tag) {
                        case 5:
                            a = o.stateNode,
                            s = !1;
                            break e;
                        case 3:
                            a = o.stateNode.containerInfo,
                            s = !0;
                            break e;
                        case 4:
                            a = o.stateNode.containerInfo,
                            s = !0;
                            break e
                        }
                        o = o.return
                    }
                    o = !0
                }
                if (5 === t.tag || 6 === t.tag)
                    r(t),
                    s ? y(a, t.stateNode) : v(a, t.stateNode);
                else if (4 === t.tag ? a = t.stateNode.containerInfo : n(t),
                null !== t.child) {
                    t.child.return = t,
                    t = t.child;
                    continue
                }
                if (t === e)
                    break;
                for (; null === t.sibling; ) {
                    if (null === t.return || t.return === e)
                        return;
                    t = t.return,
                    4 === t.tag && (o = !1)
                }
                t.sibling.return = t.return,
                t = t.sibling
            }
        }
        
        var s = e.getPublicInstance
          , l = e.mutation;
        e = e.persistence,
        l || i(e ? "235" : "236");
        var c = l.commitMount
          , d = l.commitUpdate
          , u = l.resetTextContent
          , h = l.commitTextUpdate
          , p = l.appendChild
          , f = l.appendChildToContainer
          , m = l.insertBefore
          , g = l.insertInContainerBefore
          , v = l.removeChild
          , y = l.removeChildFromContainer;
        return {
            commitResetTextContent: function(e) {
                u(e.stateNode)
            },
            commitPlacement: function(e) {
                e: {
                    for (var t = e.return; null !== t; ) {
                        if (o(t)) {
                            var n = t;
                            break e
                        }
                        t = t.return
                    }
                    i("160"),
                    n = void 0
                }
                var r = t = void 0;
                switch (n.tag) {
                case 5:
                    t = n.stateNode,
                    r = !1;
                    break;
                case 3:
                    t = n.stateNode.containerInfo,
                    r = !0;
                    break;
                case 4:
                    t = n.stateNode.containerInfo,
                    r = !0;
                    break;
                default:
                    i("161")
                }
                16 & n.effectTag && (u(t),
                n.effectTag &= -17);
                e: t: for (n = e; ; ) {
                    for (; null === n.sibling; ) {
                        if (null === n.return || o(n.return)) {
                            n = null;
                            break e
                        }
                        n = n.return
                    }
                    for (n.sibling.return = n.return,
                    n = n.sibling; 5 !== n.tag && 6 !== n.tag; ) {
                        if (2 & n.effectTag)
                            continue t;
                        if (null === n.child || 4 === n.tag)
                            continue t;
                        n.child.return = n,
                        n = n.child
                    }
                    if (!(2 & n.effectTag)) {
                        n = n.stateNode;
                        break e
                    }
                }
                for (var a = e; ; ) {
                    if (5 === a.tag || 6 === a.tag)
                        n ? r ? g(t, a.stateNode, n) : m(t, a.stateNode, n) : r ? f(t, a.stateNode) : p(t, a.stateNode);
                    else if (4 !== a.tag && null !== a.child) {
                        a.child.return = a,
                        a = a.child;
                        continue
                    }
                    if (a === e)
                        break;
                    for (; null === a.sibling; ) {
                        if (null === a.return || a.return === e)
                            return;
                        a = a.return
                    }
                    a.sibling.return = a.return,
                    a = a.sibling
                }
            },
            commitDeletion: function(e) {
                a(e),
                e.return = null,
                e.child = null,
                e.alternate && (e.alternate.child = null,
                e.alternate.return = null)
            },
            commitWork: function(e, t) {
                switch (t.tag) {
                case 2:
                    break;
                case 5:
                    var n = t.stateNode;
                    if (null != n) {
                        var r = t.memoizedProps;
                        e = null !== e ? e.memoizedProps : r;
                        var o = t.type
                          , a = t.updateQueue;
                        t.updateQueue = null,
                        null !== a && d(n, a, o, e, r, t)
                    }
                    break;
                case 6:
                    null === t.stateNode ? i("162") : void 0,
                    n = t.memoizedProps,
                    h(t.stateNode, null !== e ? e.memoizedProps : n, n);
                    break;
                case 3:
                    break;
                default:
                    i("163")
                }
            },
            commitLifeCycles: function(e, t) {
                switch (t.tag) {
                case 2:
                    var n = t.stateNode;
                    if (4 & t.effectTag)
                        if (null === e)
                            n.props = t.memoizedProps,
                            n.state = t.memoizedState,
                            n.componentDidMount();
                        else {
                            var r = e.memoizedProps;
                            e = e.memoizedState,
                            n.props = t.memoizedProps,
                            n.state = t.memoizedState,
                            n.componentDidUpdate(r, e)
                        }
                    t = t.updateQueue,
                    null !== t && kn(t, n);
                    break;
                case 3:
                    n = t.updateQueue,
                    null !== n && kn(n, null !== t.child ? t.child.stateNode : null);
                    break;
                case 5:
                    n = t.stateNode,
                    null === e && 4 & t.effectTag && c(n, t.type, t.memoizedProps, t);
                    break;
                case 6:
                    break;
                case 4:
                    break;
                default:
                    i("163")
                }
            },
            commitAttachRef: function(e) {
                var t = e.ref;
                if (null !== t) {
                    var n = e.stateNode;
                    switch (e.tag) {
                    case 5:
                        t(s(n));
                        break;
                    default:
                        t(n)
                    }
                }
            },
            commitDetachRef: function(e) {
                e = e.ref,
                null !== e && e(null)
            }
        }
    }

React version: 16.2.0
I'm not using Webpack, I'm using rails asset pipeline and uglifier.
Uglifier is version (2.5.3).

[gaearon]

Can you find a list of Uglify options you're using?

[gaearon]

Also, do you know if it uses UMD or CommonJS build of ReactDOM?

[savybrandt-zz]

We don't have any custom options set, so it's just the default listed here => https://github.com/lautis/uglifier I'm not sure about UMD vs. CommonJS. I can try to find out.

[gaearon]

Which version of uglifier are you on?

[savybrandt-zz]

Uglifier is version (2.5.3).

[savybrandt-zz]

@gaearon Heads up, I removed uglifier and pushed to a test environment and it works now. Obviously, I can't push to production like that, but at least I can see that uglifier is indeed the issue.

[savybrandt-zz]

It's fixed! 🎉 I replaced config.assets.js_compressor = :uglifier in our production.rb with config.assets.js_compressor = Uglifier.new(harmony: true) for es6 support. Thanks for all your help Dan!